I’m trying to remove the side padding of my collection list. Can someone help me out?
URL: https://www.eastsidemelrose.com/
Password: opensesame
Topic summary
Goal: remove side padding from the collection list section in the Dawn theme, especially on larger screens.
Proposed fix: add custom CSS in the theme’s asset stylesheet (base.css/main.css/style.css) targeting the collection list container selector.
- To expand container width without removing padding:
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link { max-width: 100%; } - To remove side padding only:
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link { padding-left: 0; padding-right: 0; }
Implementation steps: Admin > Online Store > Themes > Edit code > Assets > open base.css (or equivalent) > paste the code at the very bottom > Save.
Troubleshooting and updates: Initial attempt had no effect due to a misspelled file/selector. A subsequent try removed only the left padding. After copying the corrected selector exactly, both sides’ padding updated as intended.
Outcome: Issue resolved; the collection list displays with the desired padding/width behavior.
Notes: Screenshots illustrated the before/after results; they are helpful but not required to implement the solution.
1 Like
Do you like to remove only the padding? On the bigger screen this is what it look like.
If you like to max width witout removing the padding this will be the result.
If you like to achieve above mention here’s how.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link {
max-width: 100%;
}
And save.
If you like only to remove padding.
Same Instruction.
.collection-list-wrapper.page-width.isolate.no-heading.no-mobile-link {
padding-left: 0px;
padding-right: 0px;
}
And save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Hi Julius,
I added this at the bottom of my base.css file and nothing changed. Is that the wrong folder?
Sorry, its wrong spelling please copy and paste it again. Thanks!
That works perfectly, thank you so much!
Welcome, please hit likes also. Thank you!