Aprende en este tutorial cómo conseguir que la imagen descacada de las entradas de Genesis Sample ocupe todo el ancho en dispositivos móviles.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes sugerir tutoriales.
El otro día, Juan me comentaba lo siguiente:
Buenas, Nahuai.
¿Cuál sería el CSS a añadir (o modificar) para que en la versión móvil la imagen destacada de un post aparezca sin espacios laterales? O sea, que vaya de borde a borde como, por ejemplo, tienen prácticamente todos los periódicos.
Solo sería para responsive, ya que en la versión pc, los medios aun meten sidebar con publicidad. Y aunque no tuviera barra lateral, creo que estéticamente en pc no queda tan bien.
He probado con margin y padding a 0, y nada. Supongo que es porque hay temas de márgenes generales.
Quizá esta consulta dé para un nuevo tutorial.
Un abrazo y que pases buenos días festivos.
Por defecto, la imagen destacada de las entradas en Genesis Sample no ocupa todo el ancho.
¿A ti también te interesa hacer lo mismo que a Juan; es decir, que las imágenes destacadas ocupen el ancho completo en pantallas pequeñas?
Este sería el resultado:
¿La respuesta es sí? Entonces, sigue leyendo:
Snippet para hacer que las imágenes destacadas ocupen todo el ancho en dispositivos móviles
Añade este snippet al final del fichero style.css:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Ya lo tienes.
Con este fragmento de CSS consigues que la imagen destacada utilice todo el ancho, pero solo en dispositivos móviles.
Conclusiones
Como ves, con un simple snippet de código puedes hacer que la imagen destacada de las entradas en Genesis Sample se muestre en ancho completo para móviles.
Aunque el tutorial está pensado para un child theme concreto, te puede servir como base para obtener lo mismo con otros temas de Genesis.
Si tienes alguna duda te leo en los comentarios. Y si quieres dejarme una sugerencia para futuros tutoriales, envíamela a través del formulario de contacto.
Todo ventajas de ser suscriptor. 😉
