Weirdly placed collections on mobile

[Discraft_]

Hello hello, im using the minimal theme and on desktop i wanted to do a type of ``category`` that shows all the collections 3 by 2 so i had to do 2 different collections list because the max per collections list is 5 and not 6 but on desktop it looks great and all but on mobile its weird it shows 2 after 1 after 2 and after 1.

Shop: https://arts-of-the-street.myshopify.com 

Images : 

[PageFly]

Hi @Discraft_ 

PageFly here, I would love to provide a solution to the issue.

So I can explain that you have 2 different sections, on each section, there are 3 products and they are on 1 line on the desktop. Therefore, on the mobile device, they are displayed as 2 products on the first line and 1 product on the second line, similar to the 2nd section.

Because they are 2 different sections so the product of the 2nd section can be moved to fulfill the blank space for the 1st section.

I'm gonna provide 2 solutions so you can choose one of them:

1. Show 3 products on a line

It will be displayed as the screenshot below

 Please add the code below 

.index-section [data-section-type="collection-list-section"] .grid-uniform{
	display: grid;
    grid-template-columns: repeat(3,1fr);
}
.index-section [data-section-type="collection-list-section"] .medium-down--one-half {
	width: 100%;
}

and follow this path to add the code

Themes => edit code => asset => theme.scss.liquid

and add this code to the bottom of the file theme.scss.liquid

2. Show 1 product on a line (each of them will be bigger)

Please add the code below

.index-section [data-section-type="collection-list-section"] .grid-uniform{
	    display: grid;
    grid-template-columns: 1fr;
}
.index-section [data-section-type="collection-list-section"] .medium-down--one-half {
	width: 100%;
}

 also, follow the path as solution 1.

Try it and if you find my answer helpful, just give it the like or mark as the solution. Let me know if you need help.

PageFly.

[Discraft_]

I like the idea of the 2nd solution but i would like to know if theres a way to keep the desktop page to the picture number 1 ( 3 per rows and 2 rows) and to have only on the mobile your solution picture number 2 Or even do the solution number 1 but only 2 per rows? because when its 3 i feel like they too small on mobile

 

 

[Discraft_ · Accepted solution]

Hey @PageFly I like the idea of the 2nd solution but i would like to know if theres a way to keep the desktop page to the picture number 1 ( 3 per rows and 2 rows) and to have only on the mobile your solution picture number 2 Or even do the solution number 1 but only 2 per rows? because when its 3 i feel like they too small on mobile

 

  

[whiplash]

hi @PageFly 

i have also same problem 

im using responsive theme 
when i insert this code it didnt work 

this is the website
this is the website https://eco-luluca.com/?_cd=1d11fd8f9bc49640aa0413a044e3f8a7e5db997214f1167f8a513617bc846681&_uid=68...

password is bleemp