Background gradient overlay problem

Hello,
I have two pages with the exact same css but they appear to have different overlay colors.
See example here compared to here
https://mlatc.edu/dev2/
https://mlatc.edu/programs/electrical-apprenticeship/

Here is the CSS I am using

#cs-content .overlay {
position: relative;
overflow: hidden;
}

#cs-content .overlay:before{
content: “”;
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(69, 69, 69,0.5);
}

Hi @BigStache,

Thanks for writing in.

Something weird is happening. Upon checking your URL, I could not be able to load it because I am always redirected to google.

Please check if your setup if it is working well.

Thanks.

Sorry about that. Try again please. Should be fixed.

Hi There,

I am able to check and notice that on the other page, there’s two CSS declaration. See this: https://screencast-o-matic.com/watch/cbj61FlGFW. The CSS with darker background is added on global block custom CSS, then another CSS is added on cornerstone custom CSS. Remove the other one. The darker one which is on your global block custom CSS override the one you have shared above.

Hope this helps.

OK I discovered that using the Global Blocks plugin and the css on that page was causing the override. Thanks

You’re welcome! :slight_smile: