Jump to content
pavex

Responsive html 5 resolution errors

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

 

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...