Center slider multicolumn mobile

Store Design
, , ,

Topic summary

Issue: On Shopify’s Dawn theme, a multicolumn slider wasn’t centered on mobile; one store instance appeared centered while another was offset (suspected left margin/padding). Screenshots and a preview link were shared.

Action taken: A CSS fix was proposed by editing assets/base.css and adding a mobile-only media query (max-width: 749px) to set .multicolumn-list__item width to 97% (using !important). This targets small screens to adjust the slide width.

Outcome: The user reported better results with width: 100% instead of 97%, which centered the slider more accurately. They also expressed a preference to have the next slide “peek” slightly to signal the slider behavior, but accepted the current solution.

Status: Centering on mobile resolved via CSS change; enhancement (visible peek of the next slide) remains unimplemented. No further technical steps or disagreements were recorded.

Notes: Key elements included a code snippet and preview link; screenshots illustrated the offset alignment. Technical terms: media query (CSS rule that applies styles under specified screen sizes).

Summarized with AI on December 14. AI used: gpt-5.
1

Hi,

I am having trouble centering this slider multi-column section, could anyone help me?

Thanks

(Dawn theme)

Vemega - No fish have been harmed for this Omega 3 - Google Chrome 12_11_2024 14_50_29.png
Vemega - No fish have been harmed for this Omega 3 - Google Chrome 12_11_2024 14_50_29.png767×943 200 KB

1 Like
2

Thanks for your response, I do not see ‘alignment settings’. not to confuse you but i have opened up the same theme on another account to check the css and things and it is the same however the column seems to be centered on the other account, it appears it is something to do with the margins/padding on the left i just cant work it out :confused:

Vemega - No fish have been harmed for this Omega 3 - Google Chrome 12_11_2024 14_50_29.png
Vemega - No fish have been harmed for this Omega 3 - Google Chrome 12_11_2024 14_50_29.png767×943 200 KB

My Store and 5 more pages - Person 1 - Microsoft​ Edge 12_11_2024 15_24_48.png
My Store and 5 more pages - Person 1 - Microsoft​ Edge 12_11_2024 15_24_48.png653×966 198 KB

please see screenshots to see what i mean

3

Hello @brandnkay

Please send me your store URL and password, so I can check it and update you.

4

I can share a preview

https://83qn28x0iur6110e-70626345282.shopifypreview.com

1 Like
5

Hello @brandnkay

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

@media screen and (max-width: 749px){
.multicolumn-list__item{
width: 97%!important;
}
}

devcoders_0-1731427261250.png
devcoders_0-1731427261250.png1022×814 436 KB

1 Like
6

Thanks! i found that 100% works better after trying 97% it was still a little off also would like the second image to be peeking so the user knows it is a slider component however this will do thanks

1 Like
7

Hello @brandnkay

You’re very welcome! I’m thrilled to hear that you’re pleased with the outcome. Don’t hesitate to reach out if you need further assistance.

like and accepting the All solution. Thank you!