Jump to content

Changing Background Color of Entire Column - 7.0 Brine

Go to solution Solved by tuanphan,

Recommended Posts

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".

large.png

small.png

Edited by otobot1
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Link to comment

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;
}

 

Edited by otobot1
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.