Hide div on mobile

Asked

Viewed 305 times

0

would like a help if possible to hide a div on mobile.

I tried to use 

<div class="hidden-xs">
    Elemento oculto para mobile
</div>
<div class="visible-xs">
    Elemento visível para mobile e oculto nas demais resoluções
</div>

but it didn’t work.

My code is this, I just want to hide it on mobile. Someone please can me "aid"?

<div class="hidden-sm"><div style="float: left; width: 33%;"><img src="/wp-content/imagens/km.png" /> <strong>Km:</strong> 56.433</div>
<div style="float: left; width: 33%;"><img src="/wp-content/imagens/ano.png" /> <strong>Ano:</strong> 2016</div>
<div style="float: left; width: 33%;"><img src="/wp-content/imagens/carroceria.png" /> <strong>Carroceria:</strong> Hatch</div>
&nbsp;
<div style="float: left; width: 33%;"><img src="/wp-content/imagens/cambio.png" /> <strong>Câmbio:</strong> Manual</div>
<div style="float: left; width: 33%;"><img src="/wp-content/imagens/aceitatroca.png" /> <b>Aceita troca:</b> Sim</div>
<div style="float: left; width: 33%;"><img src="/wp-content/imagens/licenciado.png" /> <b>Licenciado:</b> Sim</div>

css

1 answer

1

With Bootstrap 4.0

If using the framework Bootstrap to manage your grids, you have access to the Display classes Link documentation Boostrap display who are:

  • d-Sm-None - to hide an element if the screen is larger than 576px
  • d-None d-Sm-block - to hide if the screen is less than 576px

In your case use the d-Sm-None to hide in mobile:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      rel="stylesheet"
     href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
  </head>
  <body>
    <div class="d-sm-none">Esconde em telas maiores que sm</div>
    <div class="d-none d-sm-block">Esconde em telas menores que sm</div>
  </body>
</html>

Boostrap-free

If you want to do it with pure CSS, you can use media query Link documentation media query: 

@media screen and (max-width: 576px) {
 .hidden-xs{
  display:none;
 }

 .visible-xs {
  display:block;
 }
}

With that you can make this deal, I hope I’ve helped you!

  • Sorry, but I don’t quite understand. My code is just the one on top, where I’ll add this css? open a <style> ?

Browser other questions tagged css

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