Product Grid images in Category page misaligned

Answered

Public

Vijayesh Sainju asked May 20, 2014

In one of my category pages, I have 6 products….
3 images (products) in the 1st row
and
3 images (products) in the 2nd row

The 2nd row is misaligned.
The 1st image in the 2nd row has fallen to a 3rd row by itself.

When I check the source code…all image dimensions show 235 pixels by 175 pixels.

Why is one image falling out of it’s row?

MegaMall

3 answers

Vote Up

Vote Down

Seoki Lee ⋅1510.00 $tone May 20, 2014

Public

It breaks because of the first product on row 1 has the name longer than all other products. To fix that, please open the file /skin/frontend/default/jm_megamall/css/styles.css.

At line 3532, replace this code

Code:

.products-grid li.item .inner {
    border: 0 none !important;
    margin: 20px 20px 20px 0;
    padding: 0 !important;
}

With

Code:

.products-grid li.item .inner {
    border: 0 none !important;
    margin: 20px 20px 20px 0;
    min-height: 255px;
    padding: 0 !important;
}

Hope this help.

Vote Up

Vote Down

Nuno Moura ⋅20.00 $tone February 23, 2017

Public

I fixed it by going to:
System>Configuration>Advanced>Developer>Javascript Configuration
Unify JavaScript CSS (beta): No
System>Configuration>Advanced>Developer>CSS Definitions
Unify CSS Files: No
Not sure if the translations are correct.