Move a collection list to the center on home page- Debut theme

Solved
Highlighted
Excursionist
44 0 7

Hello, I recently added a collection list section on my home page that only composite of two collections.

It didn't appear in the center of the home page, This is my URL: https://presets-market.com/ 

I need to put it in the center as I attached an image to explain what I mean.

A help will be very appreciated! 

Capture.JPG

0 Likes
Highlighted

This is an accepted solution.

Hello @Lilas-addas,

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

.collection-grid .grid.grid--uniform {
	display: inline-flex;
	width: 100%;
}
.collection-grid .grid__item:first-child {
	margin-right: 0 !important;
	margin: 0 auto;
}
.collection-grid .grid__item:last-child {
	margin: 0 auto;
	margin-left: 0;
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
Excursionist
44 0 7

Thanks a lot @oscprofessional! it works perfect. But on the mobile it is shifted from the center. Is there any way to make it right in the center in the mobile version?!

Thanks again for the help! 

0 Likes
Highlighted

This is an accepted solution.

@Lilas-addas,

Remove above css and add below css

@media only screen and (min-width: 750px) {
.collection-grid .grid.grid--uniform {
	display: inline-flex;
	width: 100%;
}
.collection-grid .grid__item:first-child {
	margin-right: 0 !important;
	margin: 0 auto;
}
.collection-grid .grid__item:last-child {
	margin: 0 auto;
	margin-left: 0;
}
}
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Highlighted
New Member
1 0 0

Hi 

I am also having same problem. And I don't have my theme css is not same as you mentioned. Where can I put the code? 

Screenshot 2020-07-02 at 11.35.41 PM.png

Screenshot 2020-07-02 at 11.37.48 PM.png

0 Likes