Make the collection list full width in impulse theme?

[Tesoro]

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? 

 

[IP1999]

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"

[Tesoro]

Thanks for the quick reply. I tried already. That section doesn't have the full width option.

 

[IP1999]

can you post a link to your site?

[Tesoro]

https://tesorofinejewelry.com/

[IP1999]

in your theme.css file there is 

.page-width {
max-width: 1500px;
margin: 0 auto;
}

remove the 

max-width: 1500px;

[Tesoro]

It affected the whole store layout. There's no way of fixing just that section?

[IP1999]

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

[Tesoro]

it didn't. 😭

[IP1999]

do you still have the code there so i can see what wrong?

[IP1999]

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. 

[Tesoro]

I just erased the unnecessary brackets and it still doesn't work.

[IP1999]

can you please post here a screen shot of the end of the file. 

[Tesoro]

 

[IP1999]

can you please get in as much lines as you could.

[IP1999]

@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

[Tesoro]

 I added another bracket but still not luck.

[IP1999]

it works, you gotta refresh your cache. or open it up in a new browser or incognito 

[Tesoro]

I tried everything you said and it doesn't look like it on my end 😞 

[IP1999]

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? 

[Tesoro]

Im using both Chrome and Safari.

  

[IP1999]

Which page and which section are you trying to make full width?

[Tesoro]

Not page. I just want this collection list to be full width. Where there are no white spaces on the left and right side of this section.

[IP1999]

on the home page?

[IP1999]

one last attempt for this forum

try putting this at the bottom of you theme.css

#shopify-section-template--16125451993296__featured-collections .page-width {
    max-width: 100% !important;
}

PS.

There will still be a litle white space (about 57 pixels). if this code works, then we can move ahead and remove the rest of the white space.

[Tesoro]

sadly still no luck

[IP1999]

GemPages answered a similar question here

https://community.shopify.com/c/shopify-design/how-do-i-expand-my-home-page-collection-list-to-full-...

Does that help?

[Tesoro]

I just followed the link you sent and it still didn't work, so I played around with the coding and tried different codes, and it worked. Thank you for your help 🙂 

[KimMcAninch]

same prob:(  But https://www.modernnursery.com/ has exactly what we want so I know it can be done.