I’ve been trying to figure out how to make the list full screen on both desktop and mobile view and im not able to. I don’t want the padding on the sides. Can someone help?
Topic summary
A user seeks to make a collection list display at full width (without side padding) on both desktop and mobile in the Impulse theme.
Initial Troubleshooting:
- Standard theme customization options (“Full page width” checkbox) are not available for this particular section.
- Attempts to modify
.page-widthCSS globally affected the entire store layout unintentionally.
CSS Solutions Attempted:
- Adding
.collection-content .page-width { max-width: 100%; }to theme.css - Fixing extra closing brackets that caused syntax errors
- Targeting specific section ID with
#shopify-section-template--16125451993296__featured-collections .page-width { max-width: 100% !important; }
Outcome:
- Despite multiple CSS iterations and cache clearing, changes did not render correctly on the user’s end.
- Eventually, the original poster experimented independently with different code variations and achieved success.
- Another participant confirmed the same goal is achievable, referencing a working example site.
Status: Resolved through self-experimentation after guided CSS attempts.
Some sections have an option for full page width. go to
Online Store > Themes > Customize
there you can see all the sections of your home page. click on them and the options for each on shows up on the right. some sections will have a check box “Full page width” and also have a check box “Add spacing above and below”
can you post a link to your site?
in your theme.css file there is
.page-width {
max-width: 1500px;
margin: 0 auto;
}
remove the
max-width: 1500px;
It affected the whole store layout. There’s no way of fixing just that section?
yes there is. put back what you did before
and add the follwoing to the end of your theme.css
.collection-content .page-width {
max-width: 100%;
}
let me knoo if this works
it didn’t. 
do you still have the code there so i can see what wrong?
you have this at the end of your CSS file
.label, label:not(.variant__button-label):not(.text-label) {
letter-spacing: .04em;
font-size: 0.90em;
}
}
.collection-content .page-width { max-width: 100%; }
}
there are too many closing bracks " } "
i think it need to looke like this
.label, label:not(.variant__button-label):not(.text-label) {
letter-spacing: .04em;
font-size: 0.90em;
}
.collection-content .page-width { max-width: 100%; }
you have 2 extra clsoing brackets.
I just erased the unnecessary brackets and it still doesn’t work.
can you please post here a screen shot of the end of the file.
can you please get in as much lines as you could.
@Tesoro i think we took out a bracket that should have stayed in there. can you add in a bracket like this.
and then send me a screen shot
it works, you gotta refresh your cache. or open it up in a new browser or incognito
I tried everything you said and it doesn’t look like it on my end 
no worries. can you send me a full screen shot of what you are seeing?
also can you go here and tell me you browser size http://howbigismybrowser.com/
what type of browser are you using?