Jump to content

Responsive html 5 resolution errors


pavex

Recommended Posts

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...