Logo Not aligned when not in full screen

Tagged: logo, mobile, responsive

This topic has 13 replies, 3 voices, and was last updated 10 years, 5 months ago by jblack6572.

Viewing 14 posts - 1 through 14 (of 14 total)

Author

Posts
March 29, 2015 at 7:38 pm #54666

jblack6572
Participant

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

March 30, 2015 at 12:05 am #54694
Sakin
Keymaster
@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; }
}
```
March 30, 2015 at 10:39 pm #54747

pixelartists
Participant

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?

March 31, 2015 at 1:03 am #54762

Sakin
Keymaster

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

March 31, 2015 at 3:07 am #54767

pixelartists
Participant

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?

March 31, 2015 at 10:04 am #54784
Sakin
Keymaster
@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; }
}
```
March 31, 2015 at 5:17 pm #54799

jblack6572
Participant

Thanks for this, worked perfect!

April 1, 2015 at 2:10 am #54825

pixelartists
Participant

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

Thanks.

April 1, 2015 at 1:41 pm #54852

Sakin
Keymaster

@pixelartists: ok thanks 🙂

April 10, 2015 at 5:49 pm #55488

jblack6572
Participant

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!

April 11, 2015 at 11:08 pm #55580
Sakin
Keymaster
@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; }
}
```
April 12, 2015 at 12:48 am #55589

jblack6572
Participant

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

April 12, 2015 at 9:12 am #55613

Sakin
Keymaster

@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}

April 14, 2015 at 6:05 pm #55754

jblack6572
Participant

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

Posts