Responsive Logo Problems

[SamBell]

Hi guys,

I am really struggling with my responsive logo - I thought I had it all sorted but it's just not working on some devices and it's not making sense to me!! I would really appreciate some help!!

All the sizing is working perfectly on my mobile phone which is an iPhone 6 but the logo isn't responsive on the iPhone 5 or some other smartphones. This is the code that's making it work on my iPhone 6 but am I missing something that makes it responsive on the 5 and other slightly smaller screens?

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

	.header-image .site-title > a {
		background-size: contain !important;
		min-height: 20px !important;
                padding: 0 20px;
	}

	.header-image .site-title {
		background-size: contain !important;
		min-height: 20px !important;
		padding: 0 20px;
	}
	
	.header-image .title-area {
		background-size: contain !important;
		padding: 0 20px;
		min-height: 20px !important;
	}
}

I have two screenshots:

working on the iPhone 6: http://www.branditgirl.com/wp-content/uploads/2015/10/mobileresponsive_1.png
not working on the iPhone 5: http://www.branditgirl.com/wp-content/uploads/2015/10/mobileresponsive_2.png

http://www.branditgirl.com

[Porter]

I'm not 100% sure what it is without seeing your full style.css file, and even then I'd have to toy with the properties quite a bit to get it working. It may be that you're not covering a certain screen size, as it works at full, it works super small, but you rmiddle size is quite messed up, and not scaling properly. Quick hint, you can simulate any device by simply changing the size of your browser window, it's almost the same as being on a device. Also note, that if you have a phone with a screen of 2560x1400 resolution, that isn't the resolution it will use in the media queries where you set your size, as there's a density and you can look up various devices to see where they actually fall, vs their resolution.

Also worth noting, your css shows an error here:

1169x 204px !important

You're missing a "p" on the 1169.

That being said, try changing that entire section to "contain", as that's what you're doing in your smallest media query, which works. Lots to try, not my exact area of expertise, but hopefully something I said helps!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[SamBell]

The contain on that line worked a treat! Thanks so much for your help!!

[Author]

Posts