Forcing an image to the bottom of the section

Hi,

I have a section with 2 columns.
In the left column there is an image. In the right column there is text with an image.

On large screens the image covers the whole column and the left column is the samen size as the right columns. Thats what I want.

On smaller screens the text in the right column becomes relatively larger. The image in the left column is then placed at the top of the column.
I want it to stay at the bottom of the column so the text and image all line out the same at the bottom of the section.

Thanks for your help.

Auke

Hey Auke,

Please see the first screenshot. Are you referring to that section?

If so, do you want it to be like this:

In that case, please enable the Marginless Columns option of the Row.

Then, add this Element CSS to each Column that holds each images.

$el {
  vertical-align:bottom !important;
}

Just note that it will not look good in some narrower screen widths.

If you mean covering the whole column with the image, that is possible too by setting the image as the columns background instead of using an Image element. But, you need to understand that your image will be cropped or different parts of it will get cut off because of the difference in aspect ratio with the column.

Please take a look at the red box in the screenshots below:

As you can see, the first red box is close to a square. As the screen increase in width, it becomes a rectangle. That means that in order to have a perfectly fit image in a narrow width (usually a tablet), you need a square image. Once you have that, you can hide the desktop image using the Hide During Breakpoints feature.

Here’s a sample of what I mean. You can put a Gap element as responsive spacer for the column and use the border option to achieve your design by the way.

Hope that helps.

Hi Christian,

Thanks for your thorough reply.
I used your first solution and added a gap for certain screen sizes.
Maybe I will create a separate image for those screen sizes, but for now a gap makes it acceptable.

Thanks!
Auke

You’re welcome, Auke.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.