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

Community Forums Forums Design Tips and Tricks Balance Theme Mobile Responsiveness – "home-featured-right" + Genesis eNews

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Pelowtz 4 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #107589

    Pelowtz
    Member
    Post count: 17

    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
    #107650

    nutsandbolts
    Moderator
    Post count: 3140

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107669

    Pelowtz
    Member
    Post count: 17

    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.

    #107672

    Pelowtz
    Member
    Post count: 17

    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.

    #107694

    nutsandbolts
    Moderator
    Post count: 3140

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #107703

    Pelowtz
    Member
    Post count: 17

    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!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.