Hi,
When I check my website (mediasos.co.uk) with a mobile, related products are not properly aligned.
Does anybody know how to fix it, or how to change it to list view instead?
OC 2.3.0.2
Thanks
I believe, ARTCORE published this here, a few days ago, it goes into the:
theme/template/common/footer.tpl
usually at the top. Exept of, if some </div>'s still exist there, to close Settings, still open, from one (or more) of the Sections above. But in any case JUST ABOVE THIS LINE:
or something like this Line, depending on the Version and Theme used:
Try it out, and if it does not work, then, you will have to add/enlarge some
MIN-HEIGHT
Value into some stylesheet.css Code, like:
but this depends on the Theme used, there is no COMMON Coding or Value for such! 
---
or then, make a Listing instead of Grid View, out of the Related items, by using something like this, in the:
theme/template/product/product.tpl
after this:
to test it, replace your Code with this one:
to make it look, as you can see here, momentarely:
http://www.jti.li/shop/index.php?route= ... duct_id=42
---
AND ALWAYS push BOTH CACHE/MOD Clear-Out/Reset Buttons in the Admin Modification Section, and eventually clear out the VqMod Cache as well, after every single Change, then, clear out your Browser Cache, before trying to see any changes !!
---
And just to mention it, I run into some problems, using the Javascript Code, it blew my Stars and price outside below of the Box Frame, and so hidden by the following Box in the next row below! But this could have been my own problem, because I already modified the CSS-File before...
---
Good Luck
Ernie
theme/template/common/footer.tpl
Code: Select all
<script>var highest = 0;
function sortNumber(a, b) {
return a - b;
}
var maxHeight = function () {
var heights = [],
grid = $('.caption');//this is the part that changes in height. change to suit your needs
grid.each(function () {
$(this).css('height', 'auto');
heights.push($(this).height());
heights = heights.sort(sortNumber).reverse();
});
highest = heights[0];
grid.each(function () {
$(this).css('height', highest);
});
};
$('#grid-view,#list-view').click(function () {
maxHeight();
});
$(window).resize(maxHeight());</script>
Code: Select all
<footer>
<div class="container"> Code: Select all
<div id="footer">MIN-HEIGHT
Value into some stylesheet.css Code, like:
Code: Select all
.product-thumb .caption{padding:0 20px;min-height:180px;}
and/or:
@media (max-width:1200px){.product-grid .product-thumb .caption{min-height:180px;padding:0 10px;}
e.t.c.---
or then, make a Listing instead of Grid View, out of the Related items, by using something like this, in the:
theme/template/product/product.tpl
after this:
Code: Select all
<?php if ($products) { ?>
<h3><?php echo $text_related; ?></h3>
<div class="row">
<?php $i = 0; ?>
<?php foreach ($products as $product) { ?>Code: Select all
<?php if ($column_left && $column_right) { ?>
<?php $class = 'product-list col-lg-12 col-md-12 col-sm-12 col-xs-12'; ?>
<?php } elseif ($column_left || $column_right) { ?>
<?php $class = 'product-list col-lg-12 col-md-12 col-sm-12 col-xs-12'; ?>
<?php } else { ?>
<?php $class = 'product-list col-lg-12 col-md-12 col-sm-12 col-xs-12'; ?>
<?php } ?>http://www.jti.li/shop/index.php?route= ... duct_id=42
---
AND ALWAYS push BOTH CACHE/MOD Clear-Out/Reset Buttons in the Admin Modification Section, and eventually clear out the VqMod Cache as well, after every single Change, then, clear out your Browser Cache, before trying to see any changes !!
---
And just to mention it, I run into some problems, using the Javascript Code, it blew my Stars and price outside below of the Box Frame, and so hidden by the following Box in the next row below! But this could have been my own problem, because I already modified the CSS-File before...
---
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.
Who is online
Users browsing this forum: No registered users and 10 guests
