Background color change on Column

Hi I'm looking to change the background color within a column (see below for an example) however it doesn't seem that I am able to do that within the confines of the current template. Is there a way to add a custom CSS code to make this work? 

Thanks in advance :) 

Please give us the URL for the page where you want to change the column color.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hi there, apologies - the site is still very much in the beginning draft stages, however this is the section I was hoping to address. 

Site information:
https://tangerine-iguana-kwg3.squarespace.com/
Password: MaintainS134!

Current state - doesn't have an option for alternating background color block options. 

The first instance is in the [Home] section of the site, while the other is in the [Shop] section of the site. 

Thanks a lot! 

s.

Add to Home > Design > Custom CSS

div#block-b88c1a14c4b2bb781c7e + .row>.span-4:nth-child(2) {
    background: orange;
}
div#page-section-5f92d38b6b423f1cda189894 .span-12>.row>.span-4:nth-child(2) {
    background: red;
}

Hi Tuanphan,

Thank you so much for providing the above! I tried the code however it looks like a portion of the column is changed in color and not the full height, any chance you could would advise me on what I could do to make sure the full height of the column is changed in color? 

Thanks a lot, appreciate all the help on this!

S.

On 10/29/2020 at 10:34 PM, Sera said:

Hi Tuanphan,

Thank you so much for providing the above! I tried the code however it looks like a portion of the column is changed in color and not the full height, any chance you could would advise me on what I could do to make sure the full height of the column is changed in color? 

Thanks a lot, appreciate all the help on this!

S.

Try this

div#page-section-5f92d38b6b423f1cda189894 .span-12>.row>.span-4:nth-child(2) {
    background: red;
}
[data-section-id="5f92d38b6b423f1cda189894"] .content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
[data-section-id="5f92d38b6b423f1cda189894"] .content-wrapper .span-4 {
    padding-top: 20px;
    padding-bottom: 20px;
}

Hello, i'd like help with the same issue. I am curious where you are finding these page section id's? I inspected my page but couldn't understand which id's were the correct ones. Thanks!

3 hours ago, Artofkind said:

I am curious where you are finding these page section id's?

If you are not familiar with browser developer tools then try the following.

Check out Heather Tovey's most excellent looking Squarespace ID Finder.