List of Collections Homepage

Solved
Tourist
12 0 0

Hello, 

 

On another topic I asked about how to center my lists of collections on the homepage (debut theme).

 

Someone helped giving me this code:

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

ul.grid.grid--uniform {
justify-content: center;
display: flex;
}

 

It solved the problem in the homepage, however I noticed later something changed also inside each collection:

 

Screenshot_2019-12-23-07-21-01-488_com.android.chrome.png

 

The products are not in a grid anymore, they are very tiny and in a row.

 

Can someone help me fixing this while still keeping the collections list on homepage centered?

 

 

Thanks a lot!

0 Likes
Shopify Expert
2470 414 520

Send your store url 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
12 0 0

vegancases.com

 

I removed this code now because I don't want the products to look like the way they were.

 

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

ul.grid.grid--uniform {
justify-content: center;
display: flex;
}

 

 

Thanks for your help :)

0 Likes
New Member
4 0 0

try to add in index page only

0 Likes
Shopify Expert
2470 414 520

add this css:

.template-index ul.grid.grid--uniform {
   justify-content: center;
   display: flex;
}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
12 0 0

Hello, 

 

I added this css to the bottom of Asset->theme.scs :

 

.template-index ul.grid.grid--uniform {   justify-content: center;   display: flex;
}

The collection lists are centered in homepage (desktop view) and the products inside collections are now in grid view, however they don't fit properly on the screen on mobile and desktop view.

 

shopify community help.jpg 

0 Likes
Shopify Expert
2470 414 520

Please add this css as check in front side because when i add it and looking fine 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
12 0 0

What do you mean by "add this css as check in front side" ? 

Sorry about my ignorance, but I don't understand much of CSS..

 

Thank you :)

0 Likes
Shopify Expert
2470 414 520

Add bellow css, that made your home page grid in center but not affect on collection page.

.template-index ul.grid.grid--uniform {   justify-content: center;   display: flex;}

Now if you have problem with this css then i have to check it so add this css and let me know 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
12 0 0

By adding this css to the bottom of Asset->theme.scs 

 

.template-index ul.grid.grid--uniform {   justify-content: center;   display: flex;
} 

 The homepage grid become centered but collection pages are affected, the grid of products inside each collection become wider and doesn't fit the screen properly, both on mobile and desktop view.

0 Likes