We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Center objects on webpage

Solved

Center objects on webpage

Headlok
Excursionist
28 2 2

Hello forums,

 

I am having trouble centering these two products. I removed a product since I am not selling them anymore. How do I center the two remaining products so they are not on the left the screen? ThanksScreen Shot 2025-01-30 at 12.46.11 PM.png

Accepted Solution (1)
Headlok
Excursionist
28 2 2

This is an accepted solution.

Used chatgpt to figure out the problem. added this to the bottom of the base.css file. ul[id^="Slider-template"] { justify-content: center; } worked perfectly.

View solution in original post

Replies 6 (6)

Asad-Mahmood
Shopify Partner
452 80 92

Go to your online store -> edit code -> base.css file and paste this code there

@media only screen and (min-width: 990px) and (max-width: 1300px) {
    .section-template--21579314037020__3a88f7e1-f547-4859-8f7b-55e7c65a5b9f-padding .grid {
        justify-content: center;
    }
}

AsadMahmood_0-1738266009792.png

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




LizHoang
Shopify Partner
1251 159 195

Hi Headlok

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

 

ul#Slider-template--21579314037020__3a88f7e1-f547-4859-8f7b-55e7c65a5b9f {
    justify-content: center !important; 
}

 

Result: 

LizHoang_0-1738812968304.png

 

Best,
Liz

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Check our Joy Rewards & Loyalty Program
Headlok
Excursionist
28 2 2

Thank you both for the responses but for some reason I cannot get it to center on my side. I pasted the code to the bottom of the base.css file. Am I doing something wrong? 

Asad-Mahmood
Shopify Partner
452 80 92

you need to paste in the end of base.css file

ul#Slider-template--21579314037020__3a88f7e1-f547-4859-8f7b-55e7c65a5b9f {
    justify-content: center !important;
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




Headlok
Excursionist
28 2 2

Screen Shot 2025-02-18 at 11.30.41 AM.pngScreen Shot 2025-02-18 at 11.30.58 AM.png

Pasted the code at the bottom of the base.css file but it doesn't change anything. Any recommendations? 

Headlok
Excursionist
28 2 2

This is an accepted solution.

Used chatgpt to figure out the problem. added this to the bottom of the base.css file. ul[id^="Slider-template"] { justify-content: center; } worked perfectly.