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?
3 answers
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.
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.
@Nuno Moura,
Thanks for the solution you post. Please let me know if you have any questions or help.
Best Regards,
Ziven.