Algunas web que son responsive pero no muestran algunos bloques en en el móvil pero si en la pc. No sé si ocultan el bloque o lo esconden, con CSS o JS. Alguien tendrá un código de ejemplo si no fuera mucha molestia? Mi web usa Bootstrap.
-
Hola @Anna, bienvenid@ a Stack Overflow, te sugiero completar el recorrido para que te familiarices con el funcionamiento del lugar y de paso ganar tu primera medalla. También puedes revisar la sección de Cómo preguntar para que tus preguntas sean bien recibidas por la comunidad y obtengas respuestas de calidad.– zerossCommented el 15 ago. 2018 a las 7:51
-
Puedes hacerlo con CSS y JS, te he compartido algunas referencias. Sería bueno que antes veas de como funcionan estos.– configbugCommented el 15 ago. 2018 a las 15:28
4 respuestas
Bootstrap lo que hace es ocultar esos "bloques" a través de las siguientes clases: .hidden-xs-down
, .hidden-sm-down
, .hidden-md-down
.
Podés probarlo con cualquier elemento agregando class=".hidden-md-down"
, por ejemplo.
Se puede hacer con los Media Query de CSS mediante las dimensiones de pantalla:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
O también con Javascript preguntando :
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Acá mi código...
}
Sea cual sea depende mucho de lo que quieras hacer. Te comparto algunas referencias.
Buen dia lo puedes lograr con los mediaquerys investiga sobre eso ya que te permite dar diferentes estilos dependiendo de la resolución si por ejemplo dices que en los moviles no se muestra aproximadamente estos tienen un maximo de 400px en el mediaquery podrias probar poner tu elemento con un display none
@media screen and(max-width:400px){
.bloque{
display:none
}
}
<html>
<head></head>
<body>
<div class="bloque">
<p>lo que hay en el bloque</p>
</div>
</body>
</html>
Bootstrap tiene una grilla, con diferentes puntos de corte.
Para Bootstrap 4 (el actual), la grilla es:
- XS: 0 a 575px
- SM: 576 a 767px
- MD: 768 a 991px
- LG: 992 a 1199px
- XL: 1200 en adelante
Además, Bootstrap pone a tu disposición diferentes clases:
.d-{breakpoint}-none
le pone display: none
a cualquier elemento a partir del comienzo del breakpint elegido en adelante.
.d-{breakpoint}-block
le pone display:block
a cualquier elemento a partir del comienzo del breakpint elegido en adelante.
En el caso de que no quieras que se vea en resoluciones xs, omites la parte del breakpoint. Queda: .d-none o .d-block
Si querés que un <div>
se vea en resoluciones de 992 en adelante únicamente, pones:
Aclaro que existen otras variedades de .d-{breakpoint}-inline
, .d-{breakpoint}-inline-block
, etc.
La información completa la puedes encontrar en la documentación de Bootstrap.