Problem with home-featured widgets in *old* Minimum theme

Community Forums Forums Design Tips and Tricks Problem with home-featured widgets in *old* Minimum theme

This topic is: resolved

This topic contains 7 replies, has 2 voices, and was last updated by  nutsandbolts 8 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #79475

    richardmartin
    Member
    Post count: 4

    The home-featured widgets on this site are responsive and behave well at different screen sizes *until* the screen size width goes below 600px. At that point, home-featured-3 and home-featured-4 “disappear” from the screen.

    http://www.hughmorgan.net

    I went to the style.css file to the @media only command where it identifies max-width of 600 px and changed the width: from 50% to 25% but that did not make a difference.

    Any suggestions? Thank you.

    http://www.hughmorgan.net
    #79531

    nutsandbolts
    Moderator
    Post count: 3113

    The problem seems to be here:

    #home-featured {
    overflow: hidden;
    padding: 60px 0;
    height: 150px;
    width: 100%;
    }

    If I remove the height: 150px; in Firebug, all four widgets show up again.


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

    #79544

    richardmartin
    Member
    Post count: 4

    Hi Andrea – thanks for catching this. I get the same results when I access the page via Chrome Inspector. However, when I remove the height from the style.css, the problem still happens.

    Any suggestions?

    #79545

    nutsandbolts
    Moderator
    Post count: 3113

    The height is still showing in the stylesheet for me. Do you have Cloudflare or a caching plugin active by chance?


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

    #79551

    richardmartin
    Member
    Post count: 4

    Hi Andrea – the site does not have cloudflare or a caching plugin. When I look in the Chrome inspector and in firebug the height variable has been removed. Not sure why it is showing in your browser/firebug.

    I don’t want to set the height too high to accommodate the icons when the page shrinks – the client will not appreciate the size of the home-featured panel. I thought removing the height variable would do the trick.

    Please let me know if you have any other ideas/suggestions.

    #79553

    nutsandbolts
    Moderator
    Post count: 3113

    Now it’s adjusting properly for me and looks good on mobile, but I understand wanting clients to be happy. You could always adjust the width/height of the icons in the media queries section to make them shrink down more, though it would make them awfully hard to tap from a phone.


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

    #79554

    richardmartin
    Member
    Post count: 4

    Andrea – it is working on my side too! many thanks for you help. I really appreciate it.

    #79555

    nutsandbolts
    Moderator
    Post count: 3113

    No problem! I’m going to mark this topic as resolved but feel free to open a new one if you need more help. :)


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

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

You must be logged in to reply to this topic.