[nirbho]

I want to have the logo set at 500px wide on desktop, but resized to 320px wide for mobiles.

The larger logo doesn’t seem to auto-scale down. I thought this was the kind of thing that Bootstrap was meant to take care of?

Any advice?

[serkan]

Hi nirbho,
You can use this css code for increasing your logo size (change the pixel how big you want;

.site-title img { max-height: 100px; }

[nirbho]

Hi Serkan,

Thanks for this, but I want to be able to have a very large logo for desktop, so when I increase the size using your code, it also increases for mobile, which makes it wider than the width of the mobile screen.

How can I have it large for desktop and only 320px wide for mobile?

Thanks!

[serkan]

Hi nirbho,
First code is working for mobile;

.site-title img { max-height: 100px; max-width: 320px;  }

Second code is working for desktop;

@media screen and (min-width: 768px) {
.site-title img { max-width: 320px; max-height: 320px; }
}

You can increase or decrease if you want ;)
Cheers.

[fioralove]

Hi there,

I tried using the code you provided for mobile but it also makes my desktop logo smaller. Any advice?

Thank you!

[serkan]

Hi,
Of course first code will effect your desktop as well. Avoid from it, you have to add the custom css code for desktop as well.
Thanks

[fioralove]

Thank you so much. I realized hours later after I submitted questions regarding CSS troubles that my server wasn’t functioning properly. That was what was causing the changes to not take affect.

Cheers!
Fiora

[serkan]

You are welcome.

[Enrique Bernal]

Hi Serkan,

Where should I include both css for my logo, same issue? I am newbie on css and wordpress.

[serkan]

Hi @Enrique Bernal;
You can check out this topic;
http://www.pixelwars.org/forums/topic/how-to-use-custom-css-for-wordpress-themes/
Thanks

[Enrique Bernal]

Thank you so much.

[serkan]

You’re welcome, please don’t forget to rate the theme on themeforest if you liked it, thanks.