Hide homepage slider Call to Action" button on mobile only

Hi

I found thie code below in another post that has almost answered my issue…

@media only screen and (max-width:1024px) {

.button-slider {
display: none;
}

}

This seems to hide the button on all screens that are smaller than 1024px (desktop). Can this value be changed/reduced so that the button is still seen on tablets but ad is only hidden on mobile devices?

Thx, Kb

Try adjusting the value of max-width in the media query definition. For example 600px.

    @media only screen and (max-width:600px) {
      .button-slider {
        display: none;
      }
    } 

That means the button will be displaying on a screen wider than 600px.

Regards,
Kharis

Hi,

Yes, you can use this Custom CSS to have the button on tablets and to remove it only from mobiles:

@media only screen and (max-width:700px) {
.button-slider {
display: none !important;
}
}

Please add the above CSS to your Child Theme’s style.css or in case you haven’t setup a Child Theme already, then you can also add the CSS to wp-admin -> Appearance -> Customizer -> Additional CSS so you won’t loose the changes after Theme or WordPress updates.

Please let me know how it works.

Kind Regards,
Csaba

1 Like

Worked like a charm Csaba.

Many thanks

Kb

Hi,

Great! You’re most welcome! If you need help with anything else, please open a new topic.

Have a nice day!

Kind Regards,
Csaba