Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Ben Miller

Can you create a background color block between two divider elements?

Question

Site URL: https://www.thislandisdigital.com/

Right now I have some code set up that assigns a background color to certain text blocks across my site to make them readable in the same way that the "Image Block: Card" element does. Unfortunately, when I try to apply that to pages like my "Home a Drone" page, it cuts out the spacers on the side. Including the spacers doesn't fix the problem either since they won't dynamically scale to match the height of the text block, instead leaving cutouts underneath them. In the example below, the height of the spacers doesn't match the height of the text, leaving a fat T shape.

What I need is to 1.) have a block of color that is as wide as the rest of the content on my page (stopping before the side padding), 2.) covers the entire text block so that it can be read easier, 3.) aligns aesthetically with the existing dividers, and 4.) dynamically scales with the rest of the page.

I don't know what options I have available to me necessarily, but my first guess is to somehow create a new shape that dynamically follows to the center of each divider (one is a divider element, the other is the "Page Border" from the site style).

Any help would be appreciated.

colorBlock_description2.jpg

Share this post


Link to post

2 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

div#page-5cef58722fb7210001f6c3cb>.row>.col>div {
    background: red;
}
div#page-5cef58722fb7210001f6c3cb>.row>.col>div:nth-last-child(4)~div {
    background: unset;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

I'm overloading. Will reply all questions this month.

Share this post


Link to post
  • 0

That gets the width of the page fairly well, though it doesn't reach the border lines as I'd hoped. I need to be able to repeat the pattern on multiple pages, too, and I can't parse your selectors enough to do that. Could you describe what that's pointing at on the page?

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...