Weirdly placed collections on mobile

Solved
Highlighted
Tourist
8 1 0

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 : 

Discraft__0-1603229567065.png

Discraft__1-1603229582431.pngDiscraft__2-1603229591731.png

 

0 Likes
Highlighted

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

111111.png

 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)

2222.png

 

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.

PageFly - Advanced Shopify Page Builder.
- PageFly Page Builder: Website | Facebook | LinkedIn | Group | Youtube
- [Tutorial] Get more tips on using PageFly to soar sales this season
- [Master Guides]: Get Your Shopify Store Ready for Black Friday
0 Likes
Highlighted
Tourist
8 1 0

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__0-1603229567065.png

2222.png

0 Likes
Highlighted
Tourist
8 1 0

This is an 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

 

Discraft__0-1603229567065.png

2222.png

  

0 Likes