Post by kevinbarnes » Sun Nov 06, 2016 12:36 am

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

New member

Posts

Joined
Sat Jul 09, 2016 2:22 pm

Post by IP_CAM » Sun Nov 06, 2016 1:01 am

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

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.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by kevinbarnes » Sun Nov 06, 2016 1:11 am

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?

New member

Posts

Joined
Sat Jul 09, 2016 2:22 pm

Post by kevinbarnes » Sun Nov 06, 2016 1:22 am

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

New member

Posts

Joined
Sat Jul 09, 2016 2:22 pm

Post by IP_CAM » Sun Nov 06, 2016 1:22 am

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

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.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by harmonybrew » Fri Jan 29, 2021 8:43 am

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.

Newbie

Posts

Joined
Wed Sep 14, 2016 1:08 am

Post by kec » 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.

kec
New member

Posts

Joined
Sat Apr 20, 2013 6:06 pm

Post by paulfeakins » Thu Sep 21, 2023 6:30 pm

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.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk


User avatar
Legendary Member
Online

Posts

Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom
Who is online

Users browsing this forum: Amazon [Bot] and 47 guests