How to get background image of cells in a row to fill at different breakpoints?

Hey there, LOVE the Sidney theme. It’s been great for my art and travel website.

I set up a page devoted to explaining my Patreon and how it works. On this page, I have a full width stretched row, within which are three cells. Each cell has its own background image, set to display “cover.” I cropped each image to be the same width and height, and they’re all the same 1:1 ratio. (see under “Where are we going on this journey?”).

On full width, the two right-most cells show a gap at the bottom where the image doesn’t fill the full cell:

(I’m only allowed to put one image in a post, but if you visit my site on desktop just move the width of your browser screen in and out and you’ll see how the background image size changes and reveals gaps)

On mobile it looks okay. There’s a black outline around each cell and I’d prefer the background image to be flush on all sides but I’ll pick and choose my battles. :wink:

Any suggestions on how to fix the styling so that the background image in each of these three cells fills the full space, and they’re always flush with the top and bottom? Basically I don’t want the background black gap to appear.

I can tell the “problem” is that all three cells don’t have the same amount of text. If changing the text is the only solution I’ll see what I can do, but I still feel that no matter what text is in them I’ll still encounter this problem at certain breakpoints.

Thanks in advance for any help!

Hello, try to use the following CSS code as a workaround for that particular row. You can add CSS code in Customize → Additional CSS section.

.panel-row-style-for-814-3 .widget,
.panel-row-style-for-814-3 .panel-widget-style {
    height: 100%;

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Ah of course! Worked like a charm, thank you!

Great! You are welcome! :slight_smile:

Kind Regards, Roman.