Mobile widgets overlapping

Community Forums Forums Design Tips and Tricks Mobile widgets overlapping

This topic is: resolved

Tagged: 

This topic contains 4 replies, has 3 voices, and was last updated by  Christina 1 year ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #65722

    Christina
    Participant
    Post count: 40

    I just noticed that 4 of my text widgets are overlapping in mobile view and I can’t find the reason for it. (I’m not so good with responsiveness yet.)

    Anyone know what I’ve done wrong?

    Thanks

    http://www.uniquewebcopy.com
    #65727

    David Browne
    Participant
    Post count: 167

    I can see that within one of your media queries on your style sheet you have:

    .home-middle
    .widget,
    .home-top
    .widget {
    -moz-box-sizing: border-box;
    float: left;
    margin: -10px 0; < This bit is wrong
    padding: 0 10px;
    width: 25%;
    }

    You need to change the bit about margin (which I have highlighted above) from negative to positive so it reads

    margin: 10px 0;

    instead. If you have rem values on the margin then you need to change that also.


    We are Dave & Erin. Full time travellers and designers. Currently in Sydney. Follow us on Google +. I’m new to twitter so be the first to say hey Twitter

    Note: Known to give only give negative critique on design. I don’t mean to offend anybody, it is just more efficient pointing out mistakes than saying “yes, its beautiful” every time. :)

    #65733

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    Hello,

    In your style.css file around line 588, you have this:

    .home-middle .widget, .home-top .widget {
    -moz-box-sizing: border-box;
    float: left;
    margin: -10px 0;
    padding: 0 10px;
    width: 25%;
    }

    the -10px margin is causing the widgets to overlap. Change it to something like “margin: 0;” or “margin: 0 auto 15px;” and that will take care of your problem.

    Have a great night!

    Tony


    #65913

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    Sorry for the double post…I didn’t see daveerin’s correct answer when I replied…I guess I gotta be quicker ;)


    #65950

    Christina
    Participant
    Post count: 40

    Awesome, thank you so much guys!

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

You must be logged in to reply to this topic.