[jblack6572]

Hi,

I’m having an issue with how my site looks when not viewed in a full screen window. The logo takes up a lot of space and bumps down the top menu. It’s fine when I maximize the window to full screen though. How can I fix this?

texaspaceauthority.org

Thanks

[Sakin]

@jblack6572: Try adding in the following css in “Appearance => Theme Options => Custom CSS” box:

@media screen and (max-width: 1280px) {
    .header-sidebar .widget ul.menu a { padding: 0 10px; }
    #hgroup-wrap img { max-width: 300px; }
}
@media screen and (max-width: 1152px) {
    #hgroup-wrap img { max-width: 200px; }
}

[pixelartists]

I am not sure if this is the same problem. When I use a Catch Flames Pro my logo resizes very small on mobile devices, is there a way to adjust the size my logo shrinks to?

[Sakin]

@pixelartists: Post in your site URL and let me know what you want to do it in your mobile devices. Any preferred size.

[pixelartists]

http://pixelartists.com/wordpress/. I’d like to keep the logo maybe half the size, this theme shrinks it down to 1″ tall.

How do you get into the code for that section?

[Sakin]

@pixelartists: For Catch Flames Pro theme, you can adjust the maximum height in the following css and then add it in “Appearance => Theme Options => Custom CSS” box:

@media screen and (max-width: 940px) {
	#branding img { max-height: 45px; }
}

[jblack6572]

Thanks for this, worked perfect!

[pixelartists]

That’s it, I needed to use 90px as my height. But, its all good.

Thanks.

[Sakin]

@pixelartists: ok thanks 🙂

[jblack6572]

Hi Sakin,

I changed our logo, and now I’m having the same issue again. Can you help?

Also, would you mind explaining what that code is doing so if it happens again I can possibly fix it myself?

Thanks so much!

[Sakin]

@jblack6572: You can replace your old css with the following css:

@media screen and (max-width: 1280px) {
    .header-sidebar .widget ul.menu a { padding: 0 10px; }
    #hgroup-wrap img { max-width: 250px; }
}
@media screen and (max-width: 1152px) {
    .header-sidebar .widget ul.menu a { padding: 0 6px; }
    #hgroup-wrap img { max-width: 180px; }
}

[jblack6572]

Hmm. That didn’t seem to work this time. Perhaps in issue in the Custom CSS?

[Sakin]

@jblack6572: I check in your site and see that you have custom css in two places. One from our theme “Appearance => Theme Options => Custom CSS” and another from other plugin. Can you check in if you have Jetpack plugin custom css enabled or any other plugin doing that . The following css is not from our custom css, which is causing issue.

@media screen and (max-width: 1280px){.header-sidebar .widget ul.menu a{padding:0 10px}#hgroup-wrap img{max-width:300px}}@media screen and (max-width: 1152px){#hgroup-wrap img{max-width:200px}}.site{margin-top:0}

[jblack6572]

You’re right again! Thanks so much for your help, that fixed it!

[Author]

Posts