Vertical Align Elements

[hanelchoi]

Hello,

I’m having an issue where I’m trying to align some elements to the bottom of a section (so resizing a window will still keep it in the same place like the header logo and menu items do).

Also, could you please help me make two text elements align to meet at the center of a section no matter the size of the window?

Thank you!

Hanel

[friech]

Hi Hanel,

Thank you for writing in, please provide us the page direct URL and point us the elements that you want to align.

Cheers!

[hanelchoi]

Hi Friech,

Here is the weblink.

The “scroll down” should be aligned vertically to the bottom of the section.
The “not your average boudoir” should be vertically aligned (both rows) to the center of the section.

Thanks!

[friech]

Hi There,

Thank you for the URL, please add this to Theme Options > CSS

.vertically-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.vertically-bottom {
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
} 

Apply the class vertically-center to the Sections that you want to vertically center the content.
Apply the class vertically-bottom to the Sections that you want the content to be at the bottom.

This should work, given that there is no margin/padding involve on the ROW, Columns, and the Element itself.

Hope it helps,
Cheers!

[hanelchoi]

Hi Friech,

Thanks so much! That’s almost perfect!
One new issue:

I have the “scroll down” set to fade in, which used to work perfectly when the window was opened. But now with it aligned to bottom, it won’t fade in until I scroll down a few inches, which defeats the purpose. Any fix for this?

Thank you again!

[friech]

Hi There,

Well, that would be a conflict from your original request because the fade effect will only trigger when the columns became halfway of the screen. Regretfully, this particular customization request is outside the scope of the support that we can offer. You may seek help from a developer should you not feel comfortable making these changes yourself. You can find an X developer on the FB X THEME user group.

Thank you for your understanding.