Mobile product grid from 2 to 1 items per row

Solved
Highlighted
Tourist
22 0 4

Hoping to get help and changing the mobile product grid display from 2 items per row to 1 item per row.

Any suggestions? URL: https://daisydreams.com.sg/collections/flower-gift-boxes . Password: 12345678

Screenshot 2020-07-16 at 20.38.10.png

0 Likes
Highlighted
Shopify Partner
1544 332 446

Hey @DaisyDreamsSG 

add code assets/rt.custom.scss.css bottom of the file

@media (max-width: 767px){
.responsive .carousel-inner:not(.owl-loaded) .product-grid>.row>div, .responsive .templateCollection .product-grid>.row>div, 
.responsive .box-product .carousel .item .product-grid .row:first-child>div {
width: 100% !important;
float: left !important;
}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
22 0 4

Hey @dmwwebartisan! Thanks for the quick reply! However, there wasn't any changes to the page despite adding in the code.

0 Likes
Highlighted
Shopify Partner
1544 332 446

This is an accepted solution.

Hey @DaisyDreamsSG 

please try this 

add code assets/theme.scss.liquid bottom of the file

@media (max-width: 767px){
.templateSearch.collection-template-promo.flex-view-2 .product-grid .row>div, .templateSearch.collection-template-promo.flex-view-3 .product-grid .row>div, .templateSearch.collection-template-promo.flex-view-4 .product-grid .row>div, .templateSearch.collection-template-promo.flex-view-6 .product-grid .row>div, .templateCollection.collection-template-promo.flex-view-2 .product-grid .row>div, .templateCollection.collection-template-promo.flex-view-3 .product-grid .row>div, .templateCollection.collection-template-promo.flex-view-4 .product-grid .row>div, .templateCollection.collection-template-promo.flex-view-6 .product-grid .row>div {
-webkit-box-flex: 0;
-ms-flex: 0 0 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
22 0 4

Hey @dmwwebartisan! Thanks for the code! I have yet to try it. But do i have to delete the previous code?

1 Like
Highlighted
Shopify Partner
1544 332 446

HI @DaisyDreamsSG 

Yes , delete the previous code.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Tourist
22 0 4

@dmwwebartisan Omg it works so well! I am so happy with the results! Thank you so so so much! Hope you have a great and pleasant day ahead!

0 Likes
Highlighted
Shopify Partner
1544 332 446

@DaisyDreamsSG  Thanks for your supoort and compliments.

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes