0

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.

2
  • 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.
    – zeross
    Commented 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.
    – configbug
    Commented el 15 ago. 2018 a las 15:28

4 respuestas 4

3

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.

1

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.

MediaQuerys CSS

Detectar si es navegador o móvi

0

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>

0

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.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.