Los dispositivos móviles para navegar en internet son cada vez más usados y nuestro sitio web tiene que estar preparado para mostrarse correctamente, una de las mejoras que podemos hacer es mostrar una versión diferente de nuestro logo cuando el sitio se muestra en dispositivos móviles.
Cambiar el logo en la versión móvil es especialmente útil si el logo que usamos es muy ancho o tiene detalles que solo se ven en un tamaño adecuado, debido a esto existe una tendencia de diseño de tener una versión responsive del logo.
En este artículo veremos cómo realizar el cambio del logo de nuestros sitio web WordPress para dispositivos móviles, teniendo en cuenta dos de las estructuras html más usadas.
Caso 1 – Logo como imagen de fondo
Este es el primer caso, la imagen se coloca a través de CSS en una etiqueta html; por ejemplo, en la imagen adjunta se muestra una estructura html en donde la etiqueta h1 envuelve a la etiqueta de link y es en esta etiqueta de link en donde a través de código CSS se esta colocando la imagen, ver flechas rojas en la imagen adjunta.
Como vemos en la imagen anterior, para cambiar el logo, debemos simplemente cambiar el background-image, seguiremos los siguientes pasos:
- Definimos @media para que el código se ejecute en anchos <=768px
- Tomaremos la misma setencia CSS para el cambio de imagen
- De ser necesario ampliaremos las dimensiones del contenedor
Nuestro código quedaría de la siguiente forma:
Caso 2 – Logo con etiqueta html img
En este caso la imagen se coloca explícitamente a través de una etiqueta html : img, podemos ver en la imagen adjunta una estructura de ejemplo en donde el link envuelve a una etiqueta html de imagen, ver flechas rojas en la pantalla adjunta.
Para este caso igualmente corregimos por CSS, pero con algunos pasos adicionales.
- Definimos el @media para que el código se ejecute en anchos <=768px
- Como no tenemos clases CSS de referencia, usaremos las clases CSS de la estructura html
- Debemos ocultar la imagen que actualmente se muestra con la etiqueta html img
- Colocar una imagen de fondo en lugar de la imagen actual
- Al quitar la imagen no se mostrará nada, hay que dar dimensiones al contenedor
- Finalmente centramos la imagen
El siguiente código refleja los cambios realizados
¿Te quedan dudas?, en el siguiente video se explica cada uno de los casos tratados anteriormente.
Artículos Relacionados
(6 votos, promedio: 5,00 de 5)
Cargando…
Hola,
Felicitaciones por el artículo. El motivo de este comentario es pedirte asesoramiento sobre un tema que está retrasando el lanzamiento de mi web. Resulta que en la versión móvil y responsive de la web, al abrir los menús desplegables las letras aparecen de un color gris claro sobre fondo naranja, algo muy difícil de leer. He intentado encontrar el CSS para modificarlo y nada. No sé donde se encuentra el CSS de la versión móvil, aparentemente en el bloque principal de código de la web no está. He probado con más de diez plugins para modificar la apariencia de mi web en dispositivos móviles y tablets con un rotundo fracaso (me gustaría también que el logo de la versión móvil fuera otro).
En fin, el tema me está devorando horas, retrasando el lanzamiento del sitio y cargando de frustración. Cualquier consejo que puedas darme será bienvenido. Muchísimas gracias por tu tiempo y atención.
Saludos.
Hola, por lo que comentas es un problema con CSS, mejor escríbeme a través del formulario de contacto, envíame la url de tu sitio para revisar y ver a qué te refieres. Saludos.
¡¡Jhon eres un crack!!, has dado con la línea de código que no lograba encontrar y he logrado solucionar ese pequeño-gran problema.
Este hombre vale oro por su desinteresada, altruista, rápida y certera respuesta.
Muchísimas gracias por todo.
Hola.
Desde hace dias tengo un problema que es el siguiente.
Mi logo en pantallas para desktop se ve de la forma correcta a como yo quiero, pero en dispositivos moviles y tablets (Ya probado en varios) se ve como si hicera zoom. https://app-1526679884.000webhostapp.com
Hola, yo lo veo igual en mi laptop, sale la imagen grande y es debido a la funcionalidad retina, es decir tu código HTML que carga tu logo tiene varias imágenes, una para 1x y otras para 2x o retina. Tendrías que revisar la configuración de tu theme o si tienes un plugin que te esta generando esto.