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.

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.

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.