🚀 Feature Request: Add responsive option for background gradient controls - [ED-9310]

[imeitis]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
I am using background images a lot and adding an overlay on top of them in order to provide contrast for the text. I love using the gradient option as it allows to keep the original image clean in the areas where I am not adding text. it's a great feature. the problem is that as soon as I switch to mobile, the gradient parameters which were defined for desktop do not provide the contrast to the text in the right position and I have no means of correcting it. this is very frustrating as it forces me to make changes on the desktop which are not optimal, just so that the mobile view would be acceptable.

Describe the solution you'd like
I would like to be able to control the background overlay definitions separate for mobile / tablet / desktop (similar to most functions in Elementor)

Describe alternatives you've considered
I do not have a good alternative. in some cases, this renders the gradient background to be totally useless.

Additional context
Add any other context or screenshots about the feature request here.

[emeraldsama]

I have a similar issue opened yesterday. I'm trying to set different background colors on sections and columns for different device sizes. What you need is responsive control added to the color picker in background overlays, and responsive control added to the second color in gradients.

I'm having difficulty building the hook to do something similar. See my issue here #10233

[epoplive]

@emeraldsama I think I'm trying to do something similar, I need a way to hook the insertion of images into backgrounds of sections and stuff. I'm trying to swap out backgrounds for a lower res version on mobile, but the widget render hooks don't seem to apply some of the basic elements. Not being able to extend some of the elements like sections and columns really sucks. :/

[black-eye]

+1

[qwik3r]

+1 - Very frustrating that you have 8 million different mobile controls but something like this -- which is fairly obvious... -- is not included.

[lovebrands]

+1

[danger-danj]

+1

[elfilalime]

+1

[Xavvi]

+1

[sfresta]

+1

[sunil-lulla]

+1, had like 3-4 cases for this where I would like to apply different backgrounds for mobile

[joehdevwp]

I agree this is needed. Elementor is supposed to be a responsive website builder, not partially responsive and partially not responsive. If a widget or container has controls for orientation or direction, then those controls need to include responsive settings - be it the position of an icon or image in a combo widget such as the CTA, icon and image boxes, or gradients everywhere they can be set. What works on desktop does not always work on mobile, as you well know.

[brentbarkley]

+1, need to at least be able to toggle the overlay on and off responsively. Full controls seems to make more sense. Having to do via dirty CSS until then.

[tizum]

since 2020 the request is open. I need this too, it's horrible to have to keep duplicating entire sections or containers with several elements due to not having this adjustment option on mobile.

[dandjral]

+1
Is there a workaround? I cannot, for the life of me, figure out how to change the angle on mobile. I tried Custom CSS my way around it, but I am missing something because nothing seems to work.