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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 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 comment

Create an account or sign in to comment

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


×
×
  • Create New...