displaying of repeat region

Hi Ray,

Just working on a bootstrap design for my website but I am having trouble getting the output to display correctly (see index.pdf) The products should display top to bottom, left to right but each rows div displays right under the div above. I am sure the answer lies in the CSS but I have been fiddling and been unable to solve this. I have attached the products.php file which will give you the output in the PDF file and the CSS I have applied to this is:

.products {
align-content: left;
width: 140px;
float: left;
text-align: center;
margin-left: auto;
margin-right: auto;
vertical-align: bottom;

}

Can you point me in the right direction please.

Is there a url where I can view the page in a browser? That would allow me to debug the CSS in action.

Hi Ray,

Please see http://dmballooncompany.com/bootstrap/products.php

Many thanks and if I do not hear back today all the very best for the New Year and 2018.

So is the issue just that sometimes the next row is spaced over? If so, then the problem lies in the inconsistent height of the text elements below the images. The easiest solution is to define a height for the container that displays the text equal to the largest possible height so that the overall size becomes consistent.

There are other more complex solutions like using javascript or classes identifying the position.

Now if you are trying to display the products in columns rather than rows, that becomes more complex and would almost definitely require javascript in a responsive layout.

Try adding this css to the page and see if that is all you need:

h6 {
    height: 60px;
}

I will need to go for a more complex solution as there is a lot more information that needs to go in the div and I do want each row lined up. I will open a premier support ticket once I have everything in place.