¿ocultar la etiqueta div solo en la vista móvil?

Estoy creando un diseño fluido para un sitio. Estoy tratando de ocultar el contenido de un <div> o todo el <div> en la vista móvil, pero no la vista de tableta y 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 'none' para el diseño móvil y configurada como bloque en los diseños de tableta/escritorio... Hay una manera más fácil de hacer eso, o es que?

Author: Brad Christie, 2013-05-14
Source

7 answers

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

@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 móviles, simplemente agregue visibility: hidden; a #title_message. ¡Espero que esto te ayude!

 104
Author: Matt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-01 05:22:33 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

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

 3
Author: Scarecrow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-13 05:10:22

Establezca la propiedad display en none como predeterminada, 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 px mínimo donde su div debe ser visible.

#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%;
    }
}
 2
Author: Phil Sinatra,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-14 20:27:28

Puede guiarse por este ejemplo. En tu 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>
 1
Author: gras,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-19 21:20:36

La solución dada no funcionó para mí en el escritorio, solo mostró ambos divs, aunque el móvil solo mostró el div móvil. Así que hice una pequeña búsqueda y encontré la opción de ancho mínimo. Actualizé 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>
 1
Author: Steve Hall,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-02 22:15:27

Prueba esto

@media handheld{
    #title_message { display: none; }
}
 0
Author: Alejandro Ruiz Arias,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-14 21:20:29

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>
 0
Author: Carlos franco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-15 23:07:33