In tab advanced and in the responsive section the feature of hiding the elements still occupies space in the screen

[arthurcant]

Prerequisites

• I have searched for similar feature requests in both open and closed discussions and cannot find an existing request.
• I have verified that the feature is still missing from the latest stable versions of Elementor or Elementor Pro.

What problem is your feature request going to solve? Please describe..

My problem is when I use in the advanced tab in the Responsive section the feature of hiding elements in a specific screen like
Hide On Widescreen, Hide On Desktop, Hide On Laptop, Hide On Tablet Landscape, Hide On Tablet Portrait, Hide On Mobile Landscape, Hide On Mobile Portrait. When I am developing my sites in the Elementor the element that should be hidden by this feature is been showing in my screen, it break my layout.

Describe the solution you'd like.

To solve it currently, i am using css with media query. I separated the two sections one is the section that I want to show in Widescreen, Desktop, Laptop, Tablet Landscape, Tablet Portrait, Mobile Landscape screens I put an id called text-main, and the last one I want to show in Mobile Portrait I put an id call text-mobile. here is my code in CSS:
`
/*
WIDESCREEN E DESKTOP */
@media (min-width: 1367px) {
.e-con {
--content-width: 1280px;
}
#text-mobile {
display: none;
}
}

/* LAPTOP */
@media (min-width: 1201px) and (max-width: 1366px) {
.e-con {
--content-width: 1100px;
}
#text-mobile {
display: none;
}
}

/* Tablet Landscape */
@media (min-width: 1025px) and (max-width: 1200px) {
.e-con {
--content-width: 924px;
}
#text-mobile {
display: none;
}
}

/* Tablet Portrait */
@media (min-width: 881px) and (max-width: 1024px) {
.e-con {
--content-width: 780px;
}
#text-mobile {
display: none;
}
}

/* Mobile Landscape */
@media (min-width: 768px) and (max-width: 880px) {
.e-con {
--content-width: 728px;
}
#text-mobile {
display: none;
}
}

/* Mobile Portrait */
@media (max-width: 767px) {
.e-con {
--content-width: 360px;
}
#text-main {
display: none;
}
}
`
My logic is hiding the element has an id called text-mobile in Widescreen, Desktop, Laptop, Tablet Landscape, Tablet Portrait and Mobile Landscape screens and show the element has an id called text-mobile in Mobile Portrait and hiding the the element has an id called text-main. The solution that I am proposing is set up in the Responsive section that it act like my CSS's code.

Problem:

Result:

Describe alternatives you've considered.

No response

Additional context

No response

Agreement

• I agree that my request may be closed without action if it doesn't meet all the requirements.