Try to add the below css code to the Customize > Custom CSS section and hceck it works or not –
@media (max-width: 767px) {
.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {
display: block !important;
}
.elementor-9 .elementor-element.elementor-element-854c345:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-854c345 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background: none;
}
}
Gave that a try and it didnt seem to work…
It should work. I didn’t see the code in the source code. Have you removed it? Did you clear cache after adding the code?
I’ve re-inserted the code as suggested and cleared cache. The area where the video is present on the desktop is only blank white space now on mobile.
Since it is controlled by the Elementor. Can you try to contact the Elementor support for this?
Hi,
The above code has worked for me but it is also making other hidden elements appear, I don’t suppose you know how to limit this to the single element (the video) do you?
BOTH THIS CODE:
.elementor-hidden-phone {
display: block !important;
}
AND THIS CODE
@media (max-width: 767px) {
.elementor:not(.elementor-edit-area-active) .elementor-hidden-phone {
display: block !important;
}
.elementor-9 .elementor-element.elementor-element-854c345:not(.elementor-motion-effects-element-type-background), .elementor-9 .elementor-element.elementor-element-854c345 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
background: none;
}
}
Have the same impact.
Cheers,
Tim.
@timgood85 you can use the elementor section id to control the code. for example use the class .elementor-element-854c345 to control only that section.
