Full image width in column - Desktop & Mobile

Hi there

What is the best way to maximise the image width for a column on Desktop & mobile.

On Desktop, I have the columns left to right like so:

On Mobile, the layout works fine to stack the image (left column) on top of the right column:

The layout is done with image in column. On both resolutions, I get funny white space padding.
i.e: Desktop:

On mobile:

I create the images using custom dimension of 786x444. But happy to change this to something that fits both desktop & mobile layout as long as I’m able to get rid of the white padding.

Any ideas?

Here is my site Read-Only: LINK

I would recommend using a div-block and setting a BG-image to cover.

You can pull the image from the CMS and with the cover display applied to the image it will fill the entire space.


Here I removed your image element, and added a div into that column.


I then added a BG image (the example) so that I could set the properties to be full and not repeat etc.

I also set a min height so that it would fill the whole area. You could just use 100% but you would need to define the size of the parent element (the element above this one)

Does that make sense?

Thanks :slight_smile:

Thanks a lot @Thomas_92. This is definitely in the right direction. I followed your instructions, and got rid of the bottom padding.
But there’s still this weird padding on the right, which is more visible Tablet, phone landscape and phone portrait:

Desktop - when parent Column element is highlighted


What would cause this? Thought that a height 100% and Width: auto will auto scale the image?



You still have 10px padding on the column (this is default).

Just remove this and it should fix the problem. By default columns will add 10px on each side :slight_smile:

That totally did the trick. Really appreciate the help @thomas_92!

Enjoy your week!

No probs @jayz

Might have to play with that min-height depending on how much text you add :smiley:

Glad I could help!