Solucionar Problemas con el Caption en Imágenes Responsive WordPress

Hoy quiero explicarles como solucionar un pequeño problema que tienen muchos blogs hechos con WordPress y que tal vez ni siquiera se han dado cuenta. Y tiene que ver con el caption o pie de imagen, la cuál es una propiedad que nos permite insertar una descripción a nuestra imagen, ojo, no confundir la propiedad alt=" ".

¿Qué sucede con el caption en WordPress?

Sí eres un curioso como yo, o simplemente accediste desde un dispositivo móvil a tu sitio web, seguramente te diste cuenta que dicha imagen no era responsive y no se adaptaba al ancho de tu dispositivo y se salía de los margenes obligando a hacer un scroll horizontal ¡puff vaya lió! Es lo peor que puede suceder en una web que se ve desde un móvil, tener que hacer un scroll horizontal para ver el contenido.

¿Por qué sucede esto?

Si analizamos con el inspector de código de Google Chrome o Firefox, nos daremos cuenta que WordPress encierra en un div a las imágenes que usan caption, ¿Cuál es el problema? Que a este div le asigna un ancho absoluto:

Si prestamos atención en la anterior linea, nos daremos cuenta que le asigno un ancho fijo mediante la propiedad style=" ", esto quiere decir que sin importar el dispositivo desde el que se visualice, siempre va a tener esa medida, provocando que en dispositivos con una resolución menor se salga.

¿Cómo lo solucionamos?

La solución es mucho más sencilla de lo que te imaginas, simplemente tenemos que añadir una nueva regla CSS a nuestro archivo de estilos. Este archivo lo puedes encontrar en la carpeta de tu plantilla como style.css

La regla CSS que añadiremos será la siguiente:

Con esto le estamos diciendo que como máximo use el 100% del ancho disponible ignorando el ancho fijo que le asigna WordPress, finalmente haciendo que se adapte a cualquier dispositivo. ¿No me crees? Haz la prueba 😉

¿Me ayudas puntuando el articulo?