This happens when the browser width is 1079(until it move to mobile view). It will show 2 products per row. But the top row will have an empty block. as it contains only 1 product. The next row below is fine as it contains 2 products block.
My problem is similar to this..
viewtopic.php?f=181&t=167866
I tried the solution there, but it did not fix my problem.
Can you post a screenshot of the problem?
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
Legendary Member
Here is the link to the related products.paulfeakins wrote:Can you post a screenshot of the problem?
https://www.cebookshop.com/index.php?ro ... loud+Guide
Well, but as long as you do not care to at least mention your OC VERSION, it would just be a waste of time, trying to explain. 
Ernie
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.
The version I used is 2.1.0.1IP_CAM wrote:Well, but as long as you do not care to at least mention your OC VERSION, it would just be a waste of time, trying to explain.
Ernie
You mean, that 2nd block moves to the 2nd row instead of staying on the 1st row and thus the whole bunch of products is not properly sorted?
Professional OpenCart extensions, support and custom work.
Contact me via email or Skype by support@thekrotek.com
Yeah and that will leave an empty block space on the first row. The last row also has an empty block space on the right. They don't fill in the empty space. My related product has 6 items only. If it fill in properly it should only have 3 rows on 1079(or lesser) browser view. But since it leaves empty right space block on the right side, it has 4 rows. You can reduce your browser window to 1079 width and you will see what I am taking about.thekrotek wrote:You mean, that 2nd block moves to the 2nd row instead of staying on the 1st row and thus the whole bunch of products is not properly sorted?
It's a pure CSS issue. Your second block has "clear: left" set and this is what puts him on the second row. If you're familiar with CSS, you simply need to play with it and adjust accordingly. But, to be honest, it's better to leave as is. Not a big deal, doesn't make your site look worse and not much people will notice it. So it's basically a waste of time, yet doable.
Professional OpenCart extensions, support and custom work.
Contact me via email or Skype by support@thekrotek.com
Well, just to give you an idea, where things need to be changed, in order to achieve your Goal. It will work, as it comes, in the DEFAULT OC v.2.1.0.1 Theme, and you need to change this line:
<?php $class='product-layout product-list col-xs-12'; ?> (full width size) in the VqMod, to change the total width, i.e., to col-xs-6 or something else, depending on, how it will look best in the different resolutions and (possibly left/right Side Box Content) settings.
can be seen here:
http://www.gratis-anzeiger.com/shop/ind ... duct_id=42
---
BUT, if you want to make it work in GRID VIEW MODE, you have to set a MIN-HEIGHT value to the Settings in your stylesheet.css - file, otherways, it will not work, as it should, if one of the Boxes breaks the OC default given HEIGHT Size, for what reason ever. (Title length, Text length, Stars, e.t.c.)
Some Examples:
can be seen here:
http://www.gratis-anzeiger.com/shop/ind ... ry&path=33
---
Good Luck
Ernie
---
related_grid_to_list_view.vqmod.xml
<?php $class='product-layout product-list col-xs-12'; ?> (full width size) in the VqMod, to change the total width, i.e., to col-xs-6 or something else, depending on, how it will look best in the different resolutions and (possibly left/right Side Box Content) settings.
can be seen here:
http://www.gratis-anzeiger.com/shop/ind ... duct_id=42
---
BUT, if you want to make it work in GRID VIEW MODE, you have to set a MIN-HEIGHT value to the Settings in your stylesheet.css - file, otherways, it will not work, as it should, if one of the Boxes breaks the OC default given HEIGHT Size, for what reason ever. (Title length, Text length, Stars, e.t.c.)
Some Examples:
Code: Select all
.product-thumb .caption{padding:0 20px;min-height:190px;}
---
.product-grid .product-thumb .caption{min-height:150px;}
---
@media (max-width:1200px){.product-grid .product-thumb .caption{min-height:200px;padding:0 10px;}http://www.gratis-anzeiger.com/shop/ind ... ry&path=33
---
Good Luck
Ernie
---
related_grid_to_list_view.vqmod.xml
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<modification>
<id><![CDATA[Change Related Products Grid to List View]]></id>
<version><![CDATA[OC v.2.1.x]]></version>
<vqmver><![CDATA[2.5.1]]></vqmver>
<author><![CDATA[Ernie - IP_CAM]]></author>
<file name="catalog/view/theme/default/template/product/product.tpl">
<operation info="Change Section CSS Style" error="log" >
<search position="replace"><![CDATA[<?php $class = 'col-lg-6 col-md-6 col-sm-12 col-xs-12'; ?>]]></search>
<add><![CDATA[<?php $class='product-layout product-list col-xs-12'; ?>]]></add>
</operation>
<operation error="log">
<search position="replace"><![CDATA[<?php $class = 'col-lg-4 col-md-4 col-sm-6 col-xs-12'; ?>]]></search>
<add><![CDATA[<?php $class='product-layout product-list col-xs-12'; ?>]]></add>
</operation>
<operation error="log">
<search position="replace"><![CDATA[<?php $class = 'col-lg-3 col-md-3 col-sm-6 col-xs-12'; ?>]]></search>
<add><![CDATA[<?php $class='product-layout product-list col-xs-12'; ?>]]></add>
</operation>
</file>
</modification>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: Majestic-12 [Bot], Semrush [Bot] and 11 guests
