Elementor Question posted in
A comprehensive tutorial library can be found here.

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

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

the button "me interesa" which is created by elementor, and setted the class:.me-interesa-float

and the whatsapp button which should show only when mobile or tablet mode:
enter image description here

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


enter image description here

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

enter image description here

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

see here

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

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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; }

    }


  2. 0

    • 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.

    Login or Signup to reply.
  3. 0

    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
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search