Técnicas Avanzadas de Responsive Design para Móviles
Resumen
Vamos a esconder elementos o aumentar el tamaño de fuente de los textos de acuerdo al tamaño de pantalla de los usuarios.
Para esto vamos a añadir clases especiales a nuestros elementos en HTML para indicarle al CSS que ciertas partes del email deben aumentar su tamaño o no deben aparecer en ciertos dispositivos:
Porque se pone el asterisco y entre corchetes la clase hide ?
*[class="hide"]
En que se diferencia si oculto el div de esta manera :
*[class="hide"] {display:none !important;}
y esta:
.hide{ display:none !important; }
Eso no me funciona a mi, y está tal cúal con lo del video.
Estoy igual :(
pregunto lo mismo.. porque uso asterisco y corchete en este caso.. alguien puede responder ??
Hola @Juanjo890, el asterisco significa todas las etiquetas.
Estos significa tener el poder de modificar cualquier etiqueta que esté disponible en el html.
los corchetes con class --> genera especificación …
Por tanto
*[class=“hide”] ----> le dice al navegador que lo interprete asi:
Apliquele a cualquier etiqueta de html que tenga en sus atributos la clase hide, las propiedades de la clase, es este caso display: none
Espero te sea claro… ¡Nunca pares de aprender! 🚀🚀🚀
Me sumo a la queja repetida por más alumnos en el curso. El código que la profesora aporta no funciona igual.
Se ha confundido en como mete algunas tablas dentro de otras, por eso los espacios quedan mal.
Además coloca todas las imágenes pensando en desktop, de tal forma que están pequeñas y descentradas en mobile.
Es decir, la premisa de "Mobile First" queda claramente olvidada.
Tenía muchas expectativas en este curso. Ahora también tengo muchas quejas y dudas.
Hola Marta.. por que en este caso se usa asterisco y corchete ?
Hola @Juanjo890, el asterisco significa todas las etiquetas.
Estos significa tener el poder de modificar cualquier etiqueta que esté disponible en el html.
los corchetes con class --> genera especificación ...
Por tanto
*[class="hide"] ----> le dice al navegador que lo interprete asi:
Apliquele a cualquier etiqueta de html que tenga en sus atributos la clase hide, las propiedades de la clase, es este caso display: none
Espero te sea claro... ¡Nunca pares de aprender! 🚀🚀🚀
Así quedó mi estructura pero no me di cuenta en que momento se hizo el tema de los espacios entre los modulos. Puntualmente los botones verdes
Estos estilos que estás aplicando de [class=“hide”] y [class=“txt-mobile”] se van a seguir respetando si el cliente reenvía nuestro email?
Porque es un problema que me he encontrado maquetando emails. Cuando especificas según que estilos en los media queries, luego al reenviar se pierde todo...
Pensando en dispositivos móviles:
Un riesgo es que parte del Responsive (estilos, selectores, pseudo, etc) no funcione en muchas apps de correo, incluso en el mismo navegador safari, Chrome, y otros que se usa por defecto en los equipos nuevos.
Aparte de testear localmente con Remote Debuging habrá otras herramientas locales u online efectivas para validar cómo va quedando lo que se va maquetando?
Pensar en el usuario -> maquetar -> combinar técnicas
Estos estilos que estás aplicando de [class="hide"] y [class="txt-mobile"] se van a seguir respetando si el cliente reenvía nuestro email?
Porque es un problema que me he encontrado maquetando emails.