Jump to content

products in grid format


Recommended Posts

Recently I upgraded cubecart to the newest version and I am noticing now that the products in grid form are not aligning and there are gaps. I assume it has to do with the size of each image. Can someone give me instructions on fixing this? Its doing it on several sites:






Edited by jlennon1863
Link to comment
Share on other sites

This seems to work for the firstcommunions clean skin:

In the file /skins/clean/styles/custom.css, add:

.products .product .info {
    height: 270px;

And for the clergy-apparel Kurouto:

In the file /skins/kurouto/styles/common.css, near line 419:

div.category_product h3 {
    margin: 5px 0;
    text-indent: 2px;

Assuming the most that the product's name will occupy is three lines of text,
Add into this rule the following:
    height: 3em;


Link to comment
Share on other sites

For clean skin the product image sizes need to be the same otherwise a larger height image will cause the next row to be out of position.

See the readme for the recommended size.

The fix above will make all your image heights the same but they may end up skewed, for the best quality use the same image size across all products.

Also applying the height fix above could cause a problem with responsive unless you apply some extra rules.

Edited by fldavidallsop
Link to comment
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.

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.


  • Create New...