gradient background on small devices

Beaver Builder
1

Hi Beaver Builder team

I am trying to get an overlay with 50% opacity on a row (containing all content) on top of a background image, BUT only on small devices (mobile).

I have tried creating a media querie combined with this class/css code:

.fl-node-56b12af7523a7 .fl-row-content-wrap:after {
background-color: rgba(251,251,251, 0.5)!important;
}

  • But I cannot get it to work. Have you got an idea for a solution?

The site url is www.jetteschrum.dk/ligeomsnart

After you land on this page, please choose the menu item called “Priser” this is the page with the background image, I would like to have a gradient overlay on mobile devices.

Thanks in advance
Jette

2

Hi Jette,

The reason as to why this isn’t working is because when you set a background color to the background overlay option. It inserts a special class to that modules row element tag.

As you do not have this option enabled, the class isn’t applied to the module element. Therefore, to get around this follow the steps below.

  1. Open the Row settings you want to apply this styling and navigate to the Advanced tab.
  2. Scroll down and in the Class field, add the following: my-overlay.
  3. Save the changes and now add the custom CSS below to your custom CSS:
@media (max-width: 768px) {
    .my-overlay .fl-row-content-wrap:after {
    	content: '';
    	display: block;
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	z-index: 0;
    }
    .my-overlay .fl-row-content {
    	position: relative;
    	z-index: 1;
    }
    .my-overlay .fl-row-content-wrap:after {
            background-color: #cf3434;
            background-color: rgba(207,52,52, 0.5);
    }
}
  1. Save the changes and when you view your site on a device that has a screen width of 768px or less, the overlay should kick in.

You will want to probably tweak the background color value to.

Thanks,
Danny

3

Thank you, your explanation makes sense :o) and the code works :o)

BR
Jette

4

Hi Jette,

No problem and happy to hear the code resolved your issue.

Thanks,
Danny