Make Newsletter Section Full-Width for Brooklyn

Solved
Highlighted
Tourist
5 1 0

Hi everyone,

 

I'm using the Brooklyn theme and have embedded the newsletter.liquid section into the bottom of the Collections template. It is the same width as the content on the page. However, I would like this to be full-width (like it is on the home page).

Below: Collections Page

AbzieAbi_0-1601021180710.png

Below: Home Page

 

AbzieAbi_1-1601021276956.png

Finally, is there any way to add spacing to the top of the newsletter section on the collections page?

 

 

Thanks in advance!

0 Likes
Highlighted
Excursionist
80 19 19

This is an accepted solution.

Hi

A bit of a workaround for this to force fullwidth on an element is to use this clever CSS snippet:

.template-collection div.index-newsletter-section {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

If you paste the above CSS into the bottom of your theme.scss file it should get you the desired result.

0 Likes
Highlighted
Tourist
5 1 0

That's great, thank you! To add a bit of space at the top, I added "margin-top" to the CSS too. Worked perfectly.

0 Likes