Streaming live at 10am (PST)

Vertically centering containers for consistent views across screen sizes


#1

Hello, I’m having a problem vertically aligning the hero container in my pages. I’d like for it to be vertically centered across screen sizes. I tried to do this using Flexbox thinking this would be the best option, but it doesn’t work :frowning: Perhaps I’ve been looking at this too long and am reaching out to help in getting a solution please.

I’m re-using this container in other pages in this project, and created a symbol for this for simple re-use.

Thanks, I greatly appreciate any support. I’m new to WF.

Link: https://preview.webflow.com/preview/homepagevideo?preview=c9c7ab97f94276df988e2562f1794323

Thank you


#2

Hi @D4L

Did you get this fixed? Does the ‘Welcome, username etc’ need to be part of the hero box too?

Stu


#3

Hi StuM,

I haven’t been able to get it fixed. The Welcome/Username Log In box does not need to be part of the hero box. I would like it to be vertically centered across all devices. Thank you.


#4

I may refer to one of the Professors of Flexbox @PixelGeek on this one - Nelson any clues? Or Dr @Waldo if you are around on the forum just now?

I briefly got it working somehow but lost it!

Stu


#5

Select the container and remove top and bottom margin.
Put the container inside the bg video element.
Give the container a fixed height, like 200px.
Give the container position relative top 50%.

Give the container transform y -50% (move up 50%).

That’s the proper way to vertically center with CSS, without having to use Flex.


#6

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