css - movil - ¿Ocultar la etiqueta div solo en la vista móvil?

ocultar div en movil

Question

Estoy creando un diseño fluido para un sitio. Estoy tratando de ocultar el contenido de un <div> o el <div> completo en la vista móvil, pero no la vista de la tableta y el escritorio.

Esto es lo que tengo hasta ahora ...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

Tengo la pantalla configurada en "ninguna" para el diseño móvil y configurada como bloque en los diseños de la tableta / escritorio ... ¿Existe una forma más fácil de hacerlo o es eso?

Answer 1

Acabo de cambiar de posición y trabajé para mí (mostrando solo móvil)

<style>
 .MobileContent {

     display: none;
  text-align:center;

 }

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

 .MobileContent {

     display:block;

 }

}
</style>
<div class="MobileContent"> Something </div>

Answer 2

Establezca la propiedad de visualización en none como predeterminado, luego use una consulta de medios para aplicar los estilos deseados al div cuando el navegador alcance un cierto ancho. Reemplace 768px en la consulta de medios con cualquiera que sea el valor mínimo de px donde debe estar visible su división.

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}

Answer 3

La solución dada no funcionó para mí en el escritorio, solo mostraba ambos divs, aunque el móvil solo mostraba el div móvil. Así que hice una pequeña búsqueda y encontré la opción de ancho mínimo. Actualicé mi código a lo siguiente y ahora funciona bien :)

CSS:

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Answer 4

Necesitarás dos cosas. La primera es la @media screen para activar el código específico en un tamaño de pantalla determinado, utilizado para un diseño receptivo. El segundo es el uso del atributo de visibility: hidden . Una vez que el navegador / pantalla alcance 600 #title_message se #title_message .

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDITAR: si está utilizando otro CSS para dispositivos móviles, simplemente agregue la visibility: hidden; a #title_message . ¡Espero que esto te ayude!

Answer 5

Puedes ser guiado por este ejemplo. En su archivo css:

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

En su archivo html:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Answer 6

prueba esto

@media handheld{
    #title_message { display: none; }
}

Answer 7

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

Esto sería para un diseño sensible con una sola página para una pantalla de iPhone específicamente. ¿Realmente estás enrutando a una página móvil diferente?