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

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


Ben Miller

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

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

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 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

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?

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