WAIT: Gradient / Overlay: Unable To Remove Overlay

Bugs
1

Bricks Version: 1.3.5
Browser: Chrome 94
OS: Windows 11

Hey chaps,

When applying a gradient to a background in Tablet breakpoint, you are unable to remove it for smaller breakpoints (Might be the same from desktop down). You have the option to remove the settings by clicking the dot at the side of the settings panel. But it does not remove it from the canvas/frontend.

Thanks :slight_smile:

1 Like
2

Hi Michael,

thank you so much for your report!
I was able to reproduce this bug in Bricks 1.3.6 as well and added it to our bug tracker.

Best regards,
timmse

3

Hi Michael,
I can provide you with some feedback.

The problem is, that setting the overlay will add an additional HTML element (the overlay wrapper) to the document, so the element is always there.

The only way to remove the overlay effect “visually” per breakpoint (the element itself is still there), is to change the color stop opacity on higher / lower breakpoints. This way, the overlay is still there, but not visible anymore, as you can see here: https://vimeo.com/648246603/46c3d79c99

I know this is not a perfect solution, but the main thing is: it works right inside the builder :wink:
Just make sure to start at the desktop breakpoint and move your way down.

Another solution is to override the behavior within media queries / custom CSS.

Conclusion: removing/resetting the settings on the lower breakpoint doesn´t remove the overlay element, because this cannot be done per breakpoint. The only way is to override the color stops/opacity per breakpoint. So actually, this is not a real bug, but a technical limitation :frowning:

1 Like
4

Thanks @timmse

I can work with that as a workaround thank you. There is another issue that is similar and I was about to message you funnily enough. the same issue is with using a background image too.

If you have a background image, you are unable to remove it at lower breakpoints. The problem here is that you do not have the option to make the image transparent as with the workaround you provided for the overlay. Also you are not able to remove the image and replace it with a background color and then add transparency.

Add background image - > move to lower breakpoint - > try to remove / hide. (this one is more of a concern as you have no workaround.

Thanks for all your support mate and keep fighting the good fight bud :muscle: