Full image width in column - Desktop & Mobile

Design help General
1

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:

image
image1281×245 87.3 KB

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

image
image306×525 114 KB

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

image
image486×602 110 KB

On mobile:

image
image316×573 120 KB

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

2

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.

image
image2298×1316 537 KB

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

image
image494×1631 56.4 KB

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:

3

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
image

Tablet:

image
image767×819 186 KB

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

Thanks
Johnathan

4

Hey,

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

image
image540×1396 52 KB

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

5

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

Enjoy your week!

6

No probs @jayz

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

Glad I could help!

Tom