Mobile product grid from 2 to 1 items per row

Solved
DaisyDreamsSG
Excursionist
26 0 6

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
dmwwebartisan
Shopify Partner
6582 1536 2002

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 | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DaisyDreamsSG
Excursionist
26 0 6

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

0 Likes
dmwwebartisan
Shopify Partner
6582 1536 2002

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 | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DaisyDreamsSG
Excursionist
26 0 6

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

dmwwebartisan
Shopify Partner
6582 1536 2002

HI @DaisyDreamsSG 

Yes , delete the previous code.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
DaisyDreamsSG
Excursionist
26 0 6

@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
dmwwebartisan
Shopify Partner
6582 1536 2002

@DaisyDreamsSG  Thanks for your supoort and compliments.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Gerard_Scheitle
New Member
2 0 0

Hello there, sorry to bring this one up again but I have the same issue with the mobile version where I have got 2 rows with products when using search results.

Gerard_Scheitle_0-1620589554567.png

I tried this fix with by adding  code assets/theme.scss.liquid bottom of the file. First time I am trying to do this and probably missing something here. So am I right by saying that we are supposed to add new asset and call it assets/theme and choosing scss.liquid and then copy the code you mentioned previously and save. If that's the case, I tried that but get message 

Gerard_Scheitle_1-1620589895997.png

 

0 Likes
Gerard_Scheitle
New Member
2 0 0

Hi again, you can ignore it, have fixed it

 

Gerard_Scheitle_0-1620590037935.png

 

0 Likes