Vertical alignment (column/row)

[CulturalInfusion]

Hi,

I would like to achieve a vertical alignment for text. (see image as example)
I have two marginless columns, left column with an image and right column with text.

I have some horizontal padding to centre the text on the right column, but if I using vertical padding to centre the text, the responsiveness gets messy in small screens, and the image gets too small also.

I would like to know an “automatic” way to centre the text to adapt to the size of the column in different screens.
And keep the image using 100% of the column/row height.

PS: I have tried the method in here and it didn’t work.
See a live example here: https://asana.com/ (quote section)

Thank you

[friech]

Hi There,

Thank you for writing in, Is it a marginless column, right? Please add this to your Theme Options > CSS

.vertical-align-middle {
	vertical-align: middle !important;
}

Then apply the class vertical-align-middle to your column.

CSS property vertical-align

Hope it helps,
Cheers!

[CulturalInfusion]

Hi,

That definitely did the trick.

Thank you friech

[friech]

You’re more than welcome, glad we could help.

Cheers!

[Lyser]

Hello,
I try to vertical align a element for mobile with pro.
In homepage, i got a background image section in witch i applied a min-height: 100vh in the inline css of customize for being full height. I got elements in a column in which i applied the vertical-align-middle class, but the column won’t go middle, it stay top.
I tried to apply the class to the row but without results too.

What im i doing wrong ?

[basanta]

Hi There,

Thanks for writing in!
First of all please don’t post login details in a post if you are not the owner of the post.
I have removed your login details from the post.

For your issue I have added following CSS to the column and it is working fine now!

Thanks

[Lyser]

Ok for login details.
Thank you ! What is the $el meaning ?

[jade]

Hi there,

The $el is a standard reference to the specific element that you are adding the CSS to.

You can read more about it here:

Element CSS | Themeco Docs

Hope this helps.

[Lyser]

Perfect, thank you very much for your help !

[basanta]

You are most welcome!