Skip to main content

Forums

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

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

    knbfoster
    Participant

    Hello,
    I am attempting to create a grid that shows a bunch of logos. The boxes would be responsive and I would really like them to line up vertically the exact same throughout. Not every logo is the same height, but no logo is taller than 65px and no logo is wider than 202px.

    As you can see here: https://codepen.io/knfoster/pen/eMWdgy, the boxes are lining up pretty funky. I’m sure there’s an easy solution, but I can’t seem to figure out how to make them line up together and have the logos positioned in the center of every box.

    I appreciate any insight I can get. Thanks!

    #268688

    Xiija
    Participant

    add … overflow: auto;
    to your .airlines-box css

    #268693

    Beverleyh
    Participant

    That won’t do anything helpful. Try floating .airlines-box left instead. Also fix your element nesting order.

    #268712

    JeroenR
    Participant

    You mean like this? https://codepen.io/anon/pen/geWzEr

    I have set the overflow to hidden, so the width isn’t affected by the scrollbars.
    Also removed the padding in the airlines-box, and positioned the images in the vertical center.

    #268713

    Beverleyh
    Participant

    Sorry but overflow:hidden; isn’t doing anything in iOS. Try float:left; instead.

    #268872

    JeroenR
    Participant

    O yes, I see it, on IOS mobile. Pff.. didn’t know that., thanks!

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

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star