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
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
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
My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
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?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
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
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
My Github OC Site: https://github.com/IP-CAM
5'600 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.
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.
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.
So please now add [SOLVED] to the start of the post title.
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
Who is online
Users browsing this forum: Amazon [Bot] and 47 guests