[Resolved] Hide Hook on desktop and Tablet

[Ricardo]

Hi,

I created a WhatsApp button via Elements/Hook.

The name is WhatsApp

I chose wp_footer

In the elements I wrote the link with this class: class=”sticky-divi-button”

In the CSS I wrote this:

.sticky-divi-button:hover {
color: #009952;
background-color: #009952!important;
}

@media only screen and (max-width: 600px) {
.sticky-divi-button {
font-size: 18px;
color: #fff !important;
text-decoration: none;
background: #006837;
padding-top: 2px;
padding-bottom: 3px;
padding-right: 11px;
padding-left: 11px;
border-radius: 5px;
position: fixed;
font-family: Open Sans,’Helvetica’,’Arial’,sans-serif;
text-align:center;
z-index: 99;

bottom: 0px;
right: 0px;
border-radius: 0px;
}
}

Everything is fine except that I have in the bottom of the desktop and tablet pages that I’ve selected to display written WhatsApp.

I know that this an amateur question, but how can I hide this element on desktop and tablet and display it only for mobile?

If you want to take a look, please see: https://www.fado.club

Thanks in advance,
Ricardo

[David]

Hi there,

you can add the hide-on-* classes to your <div> element:

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Ricardo]

Thank you!

I’m a noob 🙂

[David]

We are all Noobs – Always learning something new 🙂

Glad to be of help.

[Author]

Posts