Post by gruda » Tue May 21, 2019 9:03 pm

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.

User avatar
Newbie

Posts

Joined
Thu Apr 18, 2013 11:30 pm
Location - Dorset

Post by DigitCart » Tue May 21, 2019 9:17 pm

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

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by gruda » Tue May 21, 2019 11:14 pm

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.

Attachments

Screenshot_2019-05-21 Buy Ratchet Clank Size Matters For PSP at Geek Overload.png

related products - Screenshot_2019-05-21 Buy Ratchet Clank Size Matters For PSP at Geek Overload.png (83.14 KiB) Viewed 183 times


http://www.geekoverload.co.uk


User avatar
Newbie

Posts

Joined
Thu Apr 18, 2013 11:30 pm
Location - Dorset

Post by DigitCart » Tue May 21, 2019 11:24 pm

Hi
you may need to clear caches:
1. admin panel / extensions / modifications / click refresh button
2. admin panel / dashboard / gear icon / click refresh buttons

My Extensions / DigitCart


User avatar
Active Member

Posts

Joined
Thu Jun 22, 2017 5:32 pm


Post by gruda » Wed May 22, 2019 12:17 am

Hi
Just refreshed both the cache and the sass but nothing changed.
Many thanks.

http://www.geekoverload.co.uk


User avatar
Newbie

Posts

Joined
Thu Apr 18, 2013 11:30 pm
Location - Dorset

Post by letxobnav » Wed May 22, 2019 8:17 am

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

Crystal Light Centrum Taiwan
“Data security is paramount at [...], and we are committed to protecting the privacy of anyone who is associated with our [...]. We’ve made a lot of improvements and will continue to make them.”
When you know your life savings are gone.


Active Member

Posts

Joined
Fri Aug 18, 2017 4:35 pm
Location - Taiwan

Post by gruda » Wed May 22, 2019 4:32 pm

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.

http://www.geekoverload.co.uk


User avatar
Newbie

Posts

Joined
Thu Apr 18, 2013 11:30 pm
Location - Dorset
Who is online

Users browsing this forum: OSWorX and 34 guests