Color background behind text across page width in Hayden 7.0

Does anyone know the code to place a coloured background behind a block of text that spans the entire page width without padding on the sides? This is for the Hayden template, 7.0. 

Thanks!

3 hours ago, Sebbo said:

Does anyone know the code to place a coloured background behind a block of text that spans the entire page width without padding on the sides? This is for the Hayden template, 7.0. 

Thanks!

could you share the site url to check easier?

Yes, I'm working on www.elevatedphotos.ca.

You can see there is a black text box but I need that to span the entire width of the page. Thanks for your help! 

I know you can do this with 7.1 but I just don't have the time to manually transfer the entire site and its settings, SEO, etc. Isn't there a faster way? Can we pay someone to do this?

On 1/11/2021 at 8:06 PM, Sebbo said:

Yes, I'm working on www.elevatedphotos.ca.

You can see there is a black text box but I need that to span the entire width of the page. Thanks for your help! 

I know you can do this with 7.1 but I just don't have the time to manually transfer the entire site and its settings, SEO, etc. Isn't there a faster way? Can we pay someone to do this?

Add to Design > Custom CSS

/* Fullwidth colored text block */
.collection-type-index .page-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
div#page-58b244c837c5814e3bd54a22 .span-12>div:not(:nth-child(7)) {
    max-width: 1020px;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: auto;
    margin-right: auto;
}
html, body {
    overflow-x: hidden;
}

Quote

/* Fullwidth colored text block */
.collection-type-index .page-content {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}
div#page-58b244c837c5814e3bd54a22 .span-12>div:not(:nth-child(7)) {
    max-width: 1020px;
    padding-left: 32px;
    padding-right: 32px;
    margin-left: auto;
    margin-right: auto;
}
html, body {
    overflow-x: hidden;
}

Thanks, but this also cleared the padding on the rest of the site. Is there a way to apply to just the text box?

On 1/13/2021 at 10:24 AM, Sebbo said:

Thanks, but this also cleared the padding on the rest of the site. Is there a way to apply to just the text box?

You can remove the code & I will check again

@tuanphan Your code is seen on this page - https://www.elevatedphotos.ca/

Here is a page without the code - https://www.elevatedphotos.ca/real-estate-photo-gallery-interiors

Do you know how to add back the padding after your code on the first page?

I am trying to do something similar on my site where the background reaches the far left side of the screen but the content still has the side margins and maximum page width. Basically I want the background of that section to come out from the far left side of the screen and stop where it hits the right margin. Anyone know how to do this? 

https://kaytaylersalon.squarespace.com/about

On 4/19/2022 at 11:40 PM, ashleyysantanaa said:

I am trying to do something similar on my site where the background reaches the far left side of the screen but the content still has the side margins and maximum page width. Basically I want the background of that section to come out from the far left side of the screen and stop where it hits the right margin. Anyone know how to do this? 

https://kaytaylersalon.squarespace.com/about

You mean make black background on about us section touch right of screen?

Add to Design > Custom CSS

[data-section-id="625ed83de6dd993b40a7e4a8"] .content-wrapper {
    padding-right: 0 !important;
}