[RESOLVED] Full Height Image in a column

[markw1]

Hi there,

I am trying to place an image in a column, which will fill column 100% - i.e. always line up with the bottom of the text in the other column.

I placed the image in a column, but this only seems to work if I have marginless containers.
I need to have a gap between the text and the image, but cannot seem to place a gap in the correct place.

a) Is there a way to do a full height image background on a column - with margin on containers.
b) if not how and were do I place the gap, so I can correctly space between image and text (see screenshot)

[markw1]

I keep getting error when trying to upload image

Sorry, that file is too big (maximum size is 3072kb). Why not upload your large file to a cloud sharing service, then share the link?

image is only 2Mb ? something wrong ?

[rad]

Hi @markw1,

Thanks for sharing in.

I can’t confirm it as I’m not sure what file you’re uploading. But please upload it to a file-sharing website like Dropbox and provide the download links in your reply.

But yes, that kind of setup is more recommended in the marginless column. Plus, you can’t always force the image height while maintaining the aspect ratio, the width will increase too depending on the overall size of the container.

How about this,

1. Use the marginless column
2. Add your text using Global Block ( https://theme.co/apex/forum/t/global-blocks/24723 )
3. In your global block layout, add the margin and spacing you preferred
4. Back to your page with marginless column, add the global block element to the second column next to the image,

Thanks!

[markw1]

Hi @Rad thanks for reply,

Hmm i think that will work, but will create a big overhead across the site, as the editor (no technical) will have to get around when editing the pages. - So therefore is not practical.

Can you advise how the vertical gap could be used ?

(EDITED - my mistake should have said horizontal gap)

[Prasant]

Hello @markw1,

Thanks for updating the thread.

Yes, use of gap element is a possibility and you can use Vertical Gap Size to adjust the spacing. I have recorded a screencast that you can take a look.

Thanks.

[markw1]

@Prasant thanks for reply, but there is some confusion.

I am happy and have vertical gaps working fine.
What I am trying to get working is a horizontal gap.

I am trying to use column background to have full height image - which resizes across different resolutions. This only works when we use marginless columns. BUT i want a gap between the text and image - which if I use gap I can not display on mobile therefore keep everything looking nice.

Can you show me how to add a horizontal gap at end of text, to add space between text and the column background image .

see screenshot attached.

many thanks

[thai]

Hi There,

Please add the right padding to the left column:

Hope it helps

[markw1]

hi thanks thai,

That isn’t really what I was after, as when screen resolution goes to mobile, I am left with the right padding. I would have to write custom media query to remove this on mobile.
(Or better would be to add custom class that does this (as I would have multiple places)

I was hoping to do this with horizontal pad - which I could then hide using the pro tool.
I guess this is not possible.

[Alaa]

Hi @markw1

You can just add a custom CSS class to this text element, let’s say custom_class, then add this CSS code to (Theme Options > CSS):

@media screen and (min-width: 760px){
    .custom_class p {
        padding-right: 25px;
    }
}

That should do the trick,
Thanks.

[markw1]

@Alaa,

RESOLVED

Thanks what I actually add a class on the column (one for left, one for right - side of images)
And the breakpoint is actually 766.

@media screen and (min-width: 766px){
    .right_column_image {
        padding-right: 1em;
    }
    .left_column_image {
        padding-left: 1em;
    }
}

[Alaa]

I’m glad you managed to get it working fine, well done