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
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
[css]background: url(header-image-url) repeat-x;[/css]
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.
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.
[css]@media only screen and (max-width: 960px)[/css]
I hope this helps.
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!
You must be logged in to reply to this topic.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.