Page 1 of 1

Related Products

Posted: Tue May 21, 2019 9:03 pm
by gruda
How can I change the related products class:

from this: Class="col-xs-6 col-sm-3"

to this: class="col-lg-3 col-md-3 col-sm-6 col-xs-12"

many thanks.

Re: Related Products

Posted: Tue May 21, 2019 9:17 pm
by DigitCart
Hi
if you are using default theme, this file:
catalog\view\theme\default\template\product\product.twig

this part:

Code: Select all

{% for product in products %}
{% if column_left and column_right %}
{% set class = 'col-xs-8 col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-xs-6 col-md-4' %}
{% else %}
{% set class = 'col-xs-6 col-sm-3' %}
{% endif %}

Re: Related Products

Posted: Tue May 21, 2019 11:14 pm
by gruda
Hi thanks for the fast reply. Im trying to get the related products to stack on top of each other on medium to small devices. At themoment they simply resize next to each other . Please see image.
My website is http://www.geekoverload.co.uk
I used the code change you gave me (Many Thanks) , but it has had no effect.
Kind regards.

Re: Related Products

Posted: Tue May 21, 2019 11:24 pm
by DigitCart
Hi
you may need to clear caches:
1. admin panel / extensions / modifications / click refresh button
2. admin panel / dashboard / gear icon / click refresh buttons

Re: Related Products

Posted: Wed May 22, 2019 12:17 am
by gruda
Hi
Just refreshed both the cache and the sass but nothing changed.
Many thanks.

Re: Related Products

Posted: Wed May 22, 2019 8:17 am
by letxobnav
your current grid:
<div class="product-layout col-lg-4 col-md-4 col-sm-6 col-xs-12">

means:
1 column xs
2 columns sm
3 columns md
3 columns lg

Re: Related Products

Posted: Wed May 22, 2019 4:32 pm
by gruda
Thansk for the help just neede to change the co-xs-6 to a 12 which sorted the problem. (Still Learning)

Code: Select all

{% for product in products %}
{% if column_left and column_right %}
{% set class = 'col-xs-8 col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-xs-6 col-md-4' %}
{% else %}
{% set class = 'col-xs-6 col-sm-3' %}       set: col-xs-12
{% endif %}
Kind regards.