Yet another mobile responsive header problem… (Magazine Pro; tiny logo)

[mymattjones]

Having scoured the forums, I can see that lots of people have problems getting their header images right on mobiles. Still, I can't seem to find a clear solution. All I want is for my logo to fill the header area as well on mobile as it does on computer. Instead, it shrinks to fill just 1/9th of the space.

The header image I've uploaded is 1140 x 200px (I've uploaded a retina image too) with the logo itself taking the middle third. Perhaps I could add a second image (with the sides trimmed off) somewhere - specifically for mobile view?

Please have a look at my site (computer vs. mobile) and you'll quickly see what I'm talking about.

This is the only thing I have left to fix before I start promoting my site. I'd really appreciate your help!

http://speaktoscore.com

[sgoerger]

Looking over your header I think your approach is pretty interesting. Just make the header image (containing the logo) just as big as the entire header, and go from there. Simple and sweet!

Anyways, with how you've got this set up, I think you'll want to take another look at the "background-size" css property. Right now you've got "background-size: contain !important". Which works great at desktop but not mobile sizes. Maybe switch this "background-size" to 1140px? This keeps the background size where you currently have it on Desktop ... but that specific value keeps your logo big on smaller displays.

You might want to add a couple media queries to this, to maybe step the logo size down a bit as you go from 1140px wide, to 800, to 500, to 360 (kind of random breakpoints but you get the idea). But if you just want it to be a big logo for everyone, maybe that single change will serve you well.

[Andykev]

I just fixed the same issue with my website. Our logo is 960px?— 200px, and works great on desktop
and down to the Ipad size. However when you get to the small Iphone, the image shrinks
to fit the container (responsive). Hard to see.

So we removed our text and used just the logo, and loaded that image into our
media library. Then used that file in the media only..so when the screen size
sizes down to 480px, it triggers the new logo which fits much better.

IF YOU ADD THIS:

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

.header-image .site-title a {
	background-position: center !important;
	background-size: cover !important;
	max-width: 100%;
}

You can see that your logo as it exists "fills" the space on an Iphone, but it's not scaled exactly. Some
gets cut off, but you can see the effect you're looking for.

BETTER to make a new logo image that is smaller than the original, use that second image URL
to "trigger" with the code below. This substitutes your "big" logo to a "mobile logo". Depending
on the design... (in our case we used a full image logo only, no text so it was 480X480), you might
have to play with the size. Your logo works well if you simply size it for small screens.

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

.header-image .site-title > a {
background: url(http://THE-URL-FOR-YOUR-IMAGE-GOES-HERE.png) no-repeat !important;
background-position: center !important;
background-size: contain !important;
height: 100%;
width: 100%;
}

[mymattjones]

Thanks so much, Andy! That worked beautifully 😀

[mymattjones]

Thanks Sgoerger. So happy I've that fixed now 🙂

[Greig]

Hi Andy

Your solution works really well for in that it displays the reduced size image, but the original header image appears underneath. Do you have a clever solution to overcome this problem? I'm using the Agentpress Pro theme...

Many thanks,
Greig in New Zealand

[Author]

Posts