Balance Theme Mobile Responsiveness – "home-featured-right" + Genesis eNews

[Pelowtz]

Hello!

I am having an issue that I hope someone can help me with. To help me explain (and if you would oblige), please go to the Studiopress Responsive Testing Page and test my URL

newtheme.jesseplautz.com
http://www.studiopress.com/responsive/

As you can see the text in the blog post below my featured widget is overlapping with the widget. This only happens on smaller screen sizes when the responsiveness kicks in. The CSS element in question is the “home-featured-right" module. It currently houses the Genesis eNews extended email signup plugin and widget.

Why is this happening? Is it the eNews extended plugin or the CSS element "home-featured-right"? it is the last bit of responsive troubles I need to resolve.

Any help would be greatly appreciated

http://newtheme.jesseplautz.com

[nutsandbolts]

From what I can tell, the issue is that your #home-featured div has a specific height of 360px assigned to it, while the Balance demo does not. If you remove that, it should clear the way it's supposed to.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Pelowtz]

Yes!!! Woohoo!! Thanks so much for the help. It worked immediately.

I know just enough "developing" to get me in trouble... 😉

Many, Many, Many Thanks.

[Pelowtz]

Now I of course have a follow up question...

As the screen width gets smaller the "home-featured-left" element gets disproportionately smaller than the "home-featured-right" element.

Why does this happen? I would prefer that they stay the same size...

again, any help will blow my mind.

[nutsandbolts]

Since home featured left is an image, it has to shrink to show the whole image without exceeding the padding assigned to the widget area. The opt-in has padding as well, but you don't notice it as much because its container has the red background color that goes full screen. (If you look at the opt-in text, though, it's exactly as wide as the image.) The opt-in is also smaller in the first place, so it doesn't have such a drastic reduction in size to fit onto mobile devices.

One alternative may be to remove the slider from the home featured left widget area (assuming you're only going to use the one slide) and to set that image as the #home-featured-left background, though you'd likely have to do a LOT of CSS tweaking to get it to display correctly. Alternately, you could hide that area completely on smaller mobile devices or adjust the padding in your media queries.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Pelowtz]

You were right once again. I ended up just using a text box with img src to display the featured image. The responsiveness looks a little better but I am willing to accept it for now.

Thanks so much!

[Author]

Posts