March 21, 2018 at 12:59 pm #268687
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!March 21, 2018 at 1:44 pm #268688
add … overflow: auto;
to your .airlines-box cssMarch 21, 2018 at 3:00 pm #268693
That won’t do anything helpful. Try floating
.airlines-boxleft instead. Also fix your element nesting order.March 22, 2018 at 1:02 am #268712
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.March 22, 2018 at 2:54 am #268713
overflow:hidden;isn’t doing anything in iOS. Try
float:left;instead.March 26, 2018 at 12:12 am #268872
O yes, I see it, on IOS mobile. Pff.. didn’t know that., thanks!
You must be logged in to reply to this topic.