catalog/view/theme/default/stylesheet/stylesheet.css - at around line 580
is this
Code: Select all
.product-thumb .caption {
padding: 0 20px;
min-height: 180px;
}
by changing the minimum height you fix the problem
Code: Select all
.product-thumb .caption {
padding: 0 20px;
min-height: 250px;
}
This will do it for everything. OC has 'optimised' code that works for its layout - if you mess with that there are consequences like this.
You will have to 'optimise' it per screen now by using @media rules with the example above of changing the min height of the thumb caption. As an example of what that means and how to implement it :
https://www.w3schools.com/cssref/atrule_media.php
To use it only in featured that will require you to explore some css rules that can indicate to css for only featured products.
Usually this is done by using css selectors. css selectors in the example above are .product-thumb and .caption - these selectors are used for all thumbs.
Alternatively (which is bad practice, but not the worst) you could add the height specific css to the twig featured template file, using the html style="min-height: 250px" system. This unfortunately will not be available to use @media rules.
As another possible thought for a non coder - if you change the sort ordering of the featured to use the odd number as the offending thumb you can "hide" the issue that way.
