Background: In this project where I am making some significant changes to the layout of a website built in Colourshift2 about a year ago I am also upgrading the to the latest version of Buildr.

The orignal live website is here: https://saintsabina.org . The development website is here: https://saintsabina2018test.cloudaccess.host/

In the new version of the website I am placing two modules in the Banner position. One is the Zen Tools 2 slideshow and one is a Zen Tools 2 grid. The new slideshow stretches across 8 instead of all 12 of the grid.

In the screenshot you can see what it looks like. I have content titles that occupy two lines. The blue overlay ( I think is associated with the readmore is covering the second line of the title. How can Change that and still keep the readmore beneath the title?

Here is the custom CSS modified slightly from some Paul gave me about a year ago. I would prefer that the blue overlay not extend so far beneath the readmore button but I added the extra ems to the padding to push the readmore beneath the title.

/slideshow text background/

.backstretch-wrapper .zt-title h2, .backstretch-wrapper .zt-text-intro {background: rgba(003, 087, 160, 0.5); }

.backstretch-wrapper .zt-readmore {background: rgba(003, 087, 160, 0.5); }

@media screen and (min-width: 620px) {
#bannerwrap .colourshift .backstretch-title {width: 100%;}
}
#bannerwrap .colourshift .backstretch-title .zt-title * {text-align:center;}

#bannerwrap .colourshift .backstretch-title .zt-readmore {margin:0; padding:4.25em;}