Align Image always at the bottom

[onixbox]

Dear Team,
I would like the image in left column of the first section be aligned to the bottom.

I tried to do this with inline-css (vertical-align: bottom;)

And it works with my laptop screen. But on tablets for example it doesn’t work anymore. There it’s floating somewhere in the middle.

How could I fix this?

And 2nd question: On smartphones the left column is always shown above the right one. Is there a possibility to do this the other way round? So that the right column is shown abod the left one?

Thanks a lot!

[thai]

Hi There,

I’ve added this inline CSS to your row:

And also added this inline CSS to the column:

The image is at the bottom now.

Cheers!

[onixbox]

Hey Thai,

thank you for your support. Unfortunately the image is now almost not visible on mobile phone
(see image attached)

Summary

Here is an example how it actually should look like. Is that possible?

Summary

Thanks for you help!

Cheers

[ruenel]

Hello There,

I have logged in and edited your home test page. I removed the css given by Thai. I enabled the marginless column option in the row settings and I added vertical-align: bottom; in the column settings. The image will become smaller and smaller because its width will only rely on the width of the column.

Please check your home test page now.

[onixbox]

Thank you @RueNel

Now sticks at the bottom.

My second question was: In Mobile view the left column with the image si always shown at first, and the right column with the text, is shown below. Is there a possibility to change that order?
(show first the right column and below the left column --> see attached image)

Summary

[ruenel]

Hello There,

Yes the swapping of columns maybe possible. You will need to position the columns in the same order as the mobile view. Each of the columns will have a custom left or right class and then use this custom css;

@media(min-width: 980px){
  .x-section .x-container.marginless-columns>.x-column.left {
    float: left;
  }
  
  .x-section .x-container.marginless-columns>.x-column.right {
    float: right;
  }
}

This solution is not as perfect as it can be because it will displace the image thus leaving a big gap at the bottom of it.

I would recommend that you simply duplicate the row. You can show/hide the row for the the different screen size using the “Hide During Breakpoints” option in the row settings. This is much more cleaner way of doing the swapping of columns. To know more about “Hide During Breakpoints”, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this make sense.