Logo not shrinking for responsive view

[MelonBird]

My logo is not shrinking down small enough to show on the smallest mobile devices. I've tried a few ways I thought would fix it, but none of them did.

http://runmysites.com/wptesting/

[AnitaC]

It seems to shrinking fine because it's small to begin with. Can you provide a screenshot for the smaller device. I checked it on 320 and it's fine.

---

Need help with customization or troubleshooting? Reach out to me.

[MelonBird]

Anitac, I was just looking at it on the studiopress responsive testing here: http://www.studiopress.com/responsive/ Just plugin my URL: http://runmysites.com/wptesting/

It also looks fine on my iPhone, but I know not all devices are configured the same way, so I'm trying to make sure it works well on everything.

[AnitaC]

The first one is 240px. I really can't say how many mobile devices are 240px anymore. If you want it to go smaller, you will need to add a 240px area to your media queries.

---

Need help with customization or troubleshooting? Reach out to me.

[MelonBird]

Gotcha - it probably is overkill to worry about the 240, then. Thanks! You can mark this resolved.

[MelonBird]

I'm glad you didn't logo whis as resolved yet. I decided to make the logo wider, so now it's critical that I figure out how to contain it. I found this in FocusPro, which I used on another site with no responsive issues:

	.header-image .site-title a {
		background-size: contain !important;
	}

But I put that in the media queries sections for Quattro for smaller screens, and it's not working. I also tried:

	.header .title-area a {
		background-size: contain !important;
	}

Because it looked from Firebug like those would be the appropriate Quattro classes for the logo. But either I'm not putting it in the right place in the stylesheet (very possible, since I'm new to responsive design), or the code just isn't quite right. I also tried "max-width:100%."

Or could it be because I altered the size of the header image in functions.php? (To 320x50). If so, is there something I can put in functions.php to make it work?

[MelonBird]

Okay, somehow I've now killed all responsive styling, and I have no idea how. I replaced all the responsive design section from the original stylesheet, and that didn't fix it. Short of going back to the start and losing all my customizations and likely making the same mistake again, I have NO IDEA how to fix this. Here's my stylesheet in case that makes it easier to diagnose.

[MelonBird]

Okay, you can drop this one after all. I decided not to go with responsive design on this site.

[Author]

Posts