Responsive Header Issue: Right Side Widget Area (Magazine)

[dustin100]

Hey, I'm using the Magazine theme and I'm having an issue displaying in mobile or resized browsers.  The issue is is in the header on the right side, when you resize or use mobile, the search widget drops down(which is fine) but it adds a huge white space between the header and menu bar.   Is there anyway to fix this? or any other suggestions? The site is http://somemashups.com

Thanks for the help!

http://somemashups.com

[rfmeier]

Hello,

The reason it does this is because the header background is a background image spanning from left to right. This image is only 115 pixels in height. When the mobile styling comes into play, it exceeds that height of the image and displays the gray background.

Now your #header does have a background color specified. However, since you are using a custom header with the Genesis framework it injects css that specifies

background: url(header-image-url) repeat-x;

This css is overriding styling rules within your style.css file.

To fix this you will have to prevent an override within your style.css file like so.

#header {	
	background-color: #252525 !important; /* !important prevents override */
}

Since you style.css file is minified, I cannot determine a line number where this is specified, but it is within a media query section.

@media only screen and (max-width: 960px)

I hope this helps.

---

Ryan Meier – Twitter

[dustin100]

Yes, it makes sense. I have some tweaking to do now, but that fixed my problem.  Thanks a ton for the help and the quick reply!

[rfmeier]

You are welcome. I am glad I could help.

---

Ryan Meier – Twitter

[Author]

Posts