Skip to main content

Forums

  • This topic is empty.
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