OpenCart Community

Posted: **Fri Dec 09, 2016 12:45 am**

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

Posted: **Fri Dec 09, 2016 3:36 am**

I believe, ARTCORE published this here, a few days ago, it goes into the:
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>

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:

Code: Select all

<footer>
<div class="container">

or something like this Line, depending on the Version and Theme used:

Code: Select all

<div id="footer">

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:

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.

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:

Code: Select all

<?php if ($products) { ?>
<h3><?php echo $text_related; ?></h3>
<div class="row">
<?php $i = 0; ?>
<?php foreach ($products as $product) { ?>

to test it, replace your Code with this one:

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 } ?>

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

OpenCart Community

Related products are not properly aligned in mobile view

Related products are not properly aligned in mobile view

Re: Related products are not properly aligned in mobile view