Image Responsiveness

[Zaepian]

Hello!

I’ve got a page with 2 rows, 3 columns and within each column I have an IMAGE with a HEADLINE underneath.
The headline has a background color assigned.
My issue is, when shrinking or stretching the browser window, the images do not match the width of the background color on my headlines as I designed them to.
Can you help me figure out why?
I have the width on the images set to auto, so I thought they’d always take up as much width as the column would allow…

How it should look:

How it looks when stretched too large or shrunk too small:

So, you see, in the screenshot above I’d like the background color to line up with the edge of the images, no matter what size the browser window is. How can I achieve this?

Thank you!

[thai]

Hi There,

Would you mind providing us with your website URL so we can take a closer look?

Thanks.

[Zaepian]

http://www.harbourplazafl.com

[thai]

Hi There,

To fix this issue, please add this custom CSS under Customizer > Custom > Global CSS:

.home .el1 .x-image img {
    width: 100%;
}

Let us know how it goes!

[Zaepian]

EXACTLY what I wanted to achieve.
Sincerest thanks for your help!

[Joao]

Glad to hear it!