pavex Posted July 6, 2016 Share Posted July 6, 2016 Hi, We are in the process of building a responsive webpage. At gallery we encounter a problem where at certain resolutions (1280 x 800 for example) where the images on the gallery page do not arrange correctly. This is the test page: http://pavexparquet.pdtestare.eu/1-gallery.htm tested at this resolution gives page arrangement errors: http://quirktools.com/screenfly/#u=http%3A//pavexparquet.pdtestare.eu/1-gallery.htm&w=800&h=1280&a=24 After trying different solutions - making 4 columns instead of 6, changing text length, changing text setups - we have no idea where the problem could be. Can somebody help? Thank you. Tim Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2016 Share Posted July 6, 2016 That is because the images containers text is of different length. IF the LAST image container of a row is lower than its previous sibling container, the next row image container butts up the to previous row last container bottom edge, floats left until it encounters the right edge of the sibling whose height is greater and stops. You will have to make sure the image containers are of equal height allowing for all text length using min-height, OR maybe use display: flex; which should adjust height of all containers height to the largest automatically. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 6, 2016 Share Posted July 6, 2016 Make sure the outer parent container of all child div image containers (div with class="row") uses display: flex; flex-wrap: wrap; I used <div class="row flex"> with .row.flex { display: flex; flex-wrap: wrap; } works for me. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now