SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75!  1
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

Logo only half responsive

5 years 7 months ago #122999 by artctrldel.info@gmail.com
Logo only half responsive was created by artctrldel.info@gmail.com
Hi,

I use a responsive template: afterburner 2, but it seems when on a small item, it don't become smaller than it's original size.

www.artctrldel.net

Thanks

Please Log in to join the conversation.

5 years 7 months ago #123023 by Valentin
Replied by Valentin on topic Logo only half responsive
Hi Benjamin,

Your site is not loading for me. Please double check, and let us know more details about your question.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123031 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Logo only half responsive
Hi Valentin,

Should be up and running, I puzzled around with htaccess.txt

Please Log in to join the conversation.

5 years 7 months ago #123044 by Valentin
Replied by Valentin on topic Logo only half responsive
Hi Benjamin,
Great job!

About the logo concern, you can change the size in smaller screns by using media queries as this tutorial explains .

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123108 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Logo only half responsive
Hi Valentin,

Would it be something like this?

rt-logo (max-width: 480px) {
#mod-search-searchword{
margin: 0 auto;
width: 90px;
}
}

Thanks

Benjamin

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123127 by Valentin
Replied by Valentin on topic Logo only half responsive
Hi Benjamin,

I see basic errors there. Please consider learning the CSS basics to have a solid knowledge about the topic.

Instead of "rt-logo", use "@media", then replace // add your own CSS here with the CSS you need:
@media (max-width: 480px) {
   // add your own CSS here
}

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123135 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Logo only half responsive
I will take it later on, thank you.

Like this:


@media (max-width: 480px) {
height: 142px;
width: 339px;
}

Best

Benjamin

Please Log in to join the conversation.

5 years 7 months ago #123186 by Nick
Replied by Nick on topic Logo only half responsive
Hi Benjamin,

You're close. Right now it's saying for devices (i.e. media) that are between 0px and 480px:
height: 142px
width: 339px;

But how does the browser know you want the logo to be those heights? You need to specify it. For example, if the logo has a class of "rt-logo", you'd use:
@media (max-width: 480px) {
.rt-logo {
height: 142px;
width: 339px;
}
}

If it has a div of "rt-logo", you'd use:
@media (max-width: 480px) {
#rt-logo { 
height: 142px;
width: 339px;
}
}

Hope this helps! Let us know if you have any questions and we'll be glad to answer.

Kind regards,
Nick

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123191 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Logo only half responsive
Hi,

When I lower down the width the logo dosn't minimize, the edges gets cut off?

Thank you

Benjamin

Please Log in to join the conversation.

5 years 7 months ago #123207 by Valentin
Replied by Valentin on topic Logo only half responsive
Hi Benjamin,

Set a different height/width in that case. See the explanation Nick provided before.

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123221 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Logo only half responsive
Hi Valentin,

I did. And it only cuts the adges instead of minimizing the logo.

Best

Benjamin

Please Log in to join the conversation.

5 years 7 months ago - 5 years 7 months ago #123258 by Valentin
Replied by Valentin on topic Logo only half responsive
In addition to width/height, add this property:
background-size: 100% auto !important;

...or:
background-size: auto 100% !important;

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

5 years 7 months ago #123269 by artctrldel.info@gmail.com
Replied by artctrldel.info@gmail.com on topic Logo only half responsive
So incredibly awesome, thanks! FIXED :)))

Please Log in to join the conversation.

5 years 7 months ago #123274 by Valentin
Replied by Valentin on topic Logo only half responsive
Wonderful! :)

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining
The following user(s) said Thank You: artctrldel.info@gmail.com

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!