OpenCart Community

Hi guys,

my store is powered by oc 2.0.3.1. we have a design issue with related products section in every product pages. for eg., please see this product link https://goo.gl/wzvFSf

you see at the bottom of the page related product section, product thumb boxes are not evenly aligned. some mismatch in heights. how to fix this? so that all looks even.

Thanks
Kevin

In the theme/template/product/product.tpl Page
some lines below: <?php echo $tab_related; ?>
find:
<div class="caption">
and change to:
<div class="caption" style="min-height:200px;">
to define a 'global' minimal 200 px.(or more/less) box height.
Good Luck
Ernie

IP_CAM wrote:In the theme/template/product/product.tpl Page
some lines below: <?php echo $tab_related; ?>
find:
<div class="caption">
and change to:
<div class="caption" style="min-height:200px;">
to define a 'global' minimal 200 px.(or more/less) box height.
Good Luck
Ernie

Thank you so much. Now height issue is fixed but i could see a big space between price and buy now button. anyway to reduce that?

Ah just noticed you asked to adjust the height. Now adjusted to 150px. all looks fine. Thanks again IP_CAM. Much appreciated.

Update, Oops, you already found it...
Good for you!
---
old posting:
sure, just reduce the HEIGHT VALUE (200px) to match this, you have to test this out, to find the perfect Value and Compromise. It all depends on the amount of Characters in the Title and Description, Stars and other Crab, so, you should take Care, by writing such, in order to keep a nice looking OVERALL Design.

And BE AWARE, if only ONE Box BREAKS the layout, height-wise,(like your Number 3 Related Item Box) you could end up with OPEN FIELDS inside of Rows, instead of Boxes, containing nothing !So, make sure, to really find the highest Box , and set the min-height Value accordingly, if you use MORE than one ROW only for Related Items.
Ernie

Using code from the following amazing blog post:

https://stephenakins.blogspot.com/2011/ ... css-p.html

I was able to make a few updates so that it would work with OpenCart 2.3.0.2. I can't say what other versions this might work on, but having something to start with might help.

Just drop the attached .xml file in the vqmod/xml folder.

*** update, I needed a version for OpenCart 3, so I made one that you can drop in the root of the system folder. Updated so it also aligns search results. Don't forget to refresh the modifications on this one. (file has opencart3 in the name) ***

Not only does this make each product the same height, it does it on a row by row bases - and adjusts itself if the window is resized. Very cool!

Let me know if this works for you.

Used both files on a standard OC 3.0.3.8 version and it worked perfectly. Great solution! Thank you.

kec wrote: ↑

Thu Sep 21, 2023 4:13 pm

Used both files on a standard OC 3.0.3.8 version and it worked perfectly. Great solution! Thank you.

So please now add [SOLVED] to the start of the post title.