Why isn't my CSS hiding my button as expected?

Question

it is a wordpress website, i am trying to hide while using desktop the following elements: two buttons,

and the whatsapp button which should show only when mobile or tablet mode:

the button me interesa is created by elementor and given this html tags: elementor-element-5bcc955 elementor-align-center elementor-fixed me-interesa-float

i am using the elementor-element-5bcc955 and the me-interesa-float class this to hide the me interesa button, i am using the me-interesa customized class and the elementor-element-5bcc955 class since it is used to hook the button to html, i mean elementor gives the elementor-element-5bcc955 class to the button so as i want to be very sure the hidding tag works i am using those two classes, the assigned by elementor by default, and the customized classs assigned by me

and i am printing into <body> tag the whatsapp button using this(a wordpress hook function which is executed once is loaded:

the main goal is to hide the me interesa and whatsapp button when screen resolution is highter than 800px and maintain it hidden when resolution is bigger than 900px ( it only needs to be shown in mobile mode), so here is the code which we achieve this:

@media (min-device-width: 900px) {
  .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
    visibility: hidden !important;
}

}

@media (max-device-width: 800px) {
  .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
    visibility: visible !important;
}

however, it is not working,

checked other posts like this in Stack overflow:

Why are my CSS3 media queries not working on mobile devices?

i have in my header.php this:

<meta name="viewport" content="width=device-width, initial-scale=1">

so it should work, however it is not...

here is the css code which is written in the main css class:

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.stickyws {
  position: fixed;
  top: 0;
  width: 100%;
}



.floatws{
    position: fixed;
    top: 12px;
    width: 31px;
    height: 32px;
    bottom: 40px;
    right: 40px;
    /*background-color:#25d366;*/
    color:#FFF;
    border-radius:50px;
    text-align:center;
  font-size:18px;
    /*box-shadow: 2px 2px 3px #999;*/
  z-index:100;
}


/*.stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
     visibility: hidden !important;
    
}*/

@media (min-device-width: 900px) {
  .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
    visibility: hidden !important;
}

}

@media (max-device-width: 800px) {
  .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
    visibility: visible !important;
}

}

what i need is: from 800px to upper resolution, .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 { visibility: visible !important;

from 900px to lower resolution, .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 { visibility: visible !important;

so basically from 800px to upper resolutions hide me the buttons, and from 900 to lower resolutions, show me the buttons

however it is not working, when i open my website in full screen:

the buttons shows when in fact it should show the buttons only when using responsive:

here is how it looks and i do not have idea why, what should i do? thanks in foward

edit: tried @Frederick Brummer suggestion :

@media (min-width: 900px) {
  .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
    visibility: hidden !important;
}

}

@media (max-width: 800px) {
  .stickyws .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 {
    visibility: visible !important;
}

}

it didn't work

CSS is meaningless without HTML. Please revise to show some. See [ask] for some tips. — isherwood, Aug 05 '21 at 21:12
CSS has a simple rule: the last CSS will always takes effect so write inline CSS. — Pvria Ansari, Aug 05 '21 at 21:48

score 1 · Accepted Answer · answered Aug 06 '21 at 04:57

Elementor is great page builder for website & it provide inbuild facility to hide any widget for Dektop, tablet, mobile below is the step to hide widget

Edit the page with Elementor on which Widget that you want to hide.
Select the Section that you want to hide
In the left-side settings panel of the Section, go to the Advanced tab
Open the Responsive settings group. Here you can hide the selected Section or the Widget on Desktop, Tablet, and Mobile.
Save changes

score 0 · Answer 2 · answered Aug 06 '21 at 00:29

solution:

add commas to the css code:

@media (min-width: 900px) { .stickyws, .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 { visibility: hidden !important; }

}

@media (max-width: 800px) { .stickyws, .floatws .whatsapp-show .me-interesa-float .elementor-element-5bcc955 { visibility: visible !important; }

}

score -1 · Answer 3 · answered Aug 05 '21 at 21:26

it might be related to your use of device-width. you probably want to just use width instead.
it's also not necessary to set a max-width, you can just start with your default state, then at some min-width you change the visibility. the idea is that you never want to give a small viewport more than it needs, so you don't add things and then make changes at some maximum, but instead you leave things out and then only bring them back at some minimum.

Why isn't my CSS hiding my button as expected?

3 Answers3