Changing Background Color of Entire Column - 7.0 Brine

Site URL: https://infinityfs.squarespace.com/individuals

I'm building a new site on 7.0 Brine, and I'm trying to figure out how to change the background color of an entire column if it's possible. I managed to emulate the look I want by changing the colors of the spacers, image, and text block that make up the column, but as expected, it breaks when the page gets smaller because the spacers shrink vertically relative to the image block. If I want to make this work, I need to be able to color the entire column area. Is this possible?

As long as this question remains open, the site password will be "CSSisconfusing".

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4 {
    background: white !important;
}

1 hour ago, tuanphan said:

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4 {
    background: white !important;
}

 

I added the code but it didn't seem to do anything. I haven't edited that section of my index page in the past 6 hours so I don't think the block id would have changed

div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4 {
    background: red !important;
}

Ah I see what the code does now. Super clever! My friend helped me tweak is a little bit to get more the effect that I was looking for, but this was super helpful because we couldn't figure out how to affect the whole columns because their ID changes every time the page loads. This is the code we wound up going with if you're curious. Thanks for the help.

//making all background colours the same height
div#block-yui_3_17_2_1_1603436775273_52904 + .row{
  	display:flex;
}
//rounding the corners of all 3 columns
div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4{
  	border-radius: 4px;
}
//changing colours of columns in 3 values section to different shades of grey
//columns 1 and 3
div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4:nth-child(odd) {
    background: #F9F9F9 !important;
  	box-shadow: 0px 0px 3px 3px rgba(0,0,0,0.1);
}
//column 2
div#block-yui_3_17_2_1_1603436775273_52904 + .row .span-4:nth-child(even) {
    background: #F4F4F4 !important;
  	box-shadow: 0px 0px 3px 5px rgba(0,0,0,0.1);
  	//z-index:0;
  	position:relative;
}