Hide a HTML5 and CSS button when on Smartphone

Asked

Viewed 57 times

0

I made a responsive web application, which when you arrive at Checkout has two buttons: Print and Save.

Only that the user (customer) on the smartphone clicks to print, even if there is no printer.

I tried to extend with @media, but I’m not getting.

How can I hide the "Print" button and leave only the "Save" button when the user is on Smatphone or Tablet?

html5 css3 responsive-layout bootstrap-4 flexbox

1 answer

2


If you are using bootstrap4, you can use the class d-none (means None display)

As this set of classes accept prefixes, you can add the class d-sm-block to switch to display block when the screen is small or higher.

In the end, I’d be like this:

<button class='d-none d-sm-block'>Imprimir</button>

When the screen is small, medium, large or extra large, Voce will have a display block, normal. When the screen is lower than small, extra small type (or smartphone) the display will be None.

I hope I’ve helped.

  • Thanks guys for the help. The @Andrew Ribeiro solution worked perfectly on Bootstrap 4. Thank you Andrew.

Browser other questions tagged html5 css3 responsive-layout bootstrap-4 flexbox

You are not signed in. Login or sign up in order to post.