HTML; mostrar u ocultar contenido en móvil
Resuelto
Nathanielmlmb
Mensajes publicados
70
Estado
Miembro
-
Pitet Mensajes publicados 2845 Estado Miembro -
Pitet Mensajes publicados 2845 Estado Miembro -
Hola,
Soy propietario de un sitio web alojado en Tumblr.
El CMS de Tumblr me permite añadir páginas codificadas en HTML.
Me gustaría usar este código CSS para optimizar la visualización de mi sitio en móviles;
//tamaños de pantalla medio+
@media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//tamaños de pantalla pequeños
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
Actualmente he intentado poner este código entre estas etiquetas dime si son correctas ;
<style type="text/css">
<!--
Mi código CSS
-->
</style>
Me gustaría saber en qué ubicación debo escribir el contenido de mi página en este código para que un bloque de texto, por ejemplo, aparezca solo en navegadores móviles, y que otro bloque de texto nunca aparezca en navegadores móviles.
Gracias
Soy propietario de un sitio web alojado en Tumblr.
El CMS de Tumblr me permite añadir páginas codificadas en HTML.
Me gustaría usar este código CSS para optimizar la visualización de mi sitio en móviles;
//tamaños de pantalla medio+
@media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//tamaños de pantalla pequeños
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
Actualmente he intentado poner este código entre estas etiquetas dime si son correctas ;
<style type="text/css">
<!--
Mi código CSS
-->
</style>
Me gustaría saber en qué ubicación debo escribir el contenido de mi página en este código para que un bloque de texto, por ejemplo, aparezca solo en navegadores móviles, y que otro bloque de texto nunca aparezca en navegadores móviles.
Gracias
1 respuesta
-
Hola,
Tu etiqueta style es correcta (el atributo type es opcional).
Idealmente esta etiqueta debería situarse dentro de la etiqueta <head> de tu documento HTML, pero también funcionará si la colocas dentro de la etiqueta <body>.
En tu contenido, basta con aplicar las diferentes clases a las etiquetas que quieras mostrar u ocultar, por ejemplo:<p class="desktop-only">Parágrafo visible en escritorio</p> <p class="mobile-only">Parágrafo visible en móvil</p>
Que tengas un buen día