I am using the magazine theme and have a header image the size required (960 x 115). However, when I view it on mobile, the image does not resize so it just gets cut off and you can’t see my site logo/name anymore.
I thought that I would simply upload a small logo, use the tagline field and then make the background of the header area a matching color. I do see that there is a “header” area, which I seem to be able to change, but it is only within the 960px area. There is still the dark gray area on either side and that’s the color I want to change. I tried using the CSS inspector in my browser but I couldn’t figure out how to change it.
So ultimately, I want the result to be that the dark gray “crosshatch” area in the full width of the header area (between the top black nav and the bottom black nav) is a different color.
Any thoughts? Thanks!
PS: My site is local so I don’t have a URL at the moment but if you look at the theme demo, you can see that dark gray hatch color/graphic behind the theme logo.
There’s a couple ways you can get the mobile version to be responsive. You can create varying sizes of your header (width size 1024, 768, 480, 320 and 240). Then in the different mobile response areas add the #header element and include the appropriate header image. Or you could use Nicks – Genesis Responsive Header – http://designsbynickthegeek.com/plugins/genesis-responsive-header. You would still need those custom sizes, but you won’t need to create the different #header elements. For the color – you will need to add the color to that area in the media queries/responsive area of the style sheet.
Web: http://cre8tivediva.com / Twitter: @thecre8tivediva
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.