[Support request] center containers in viewport and connect them with anchors

[Matthias]

Hi,

I want to create a landingpage with several containers. The idea is to reach every container by clicking the button with an anchor link and to see every container always centered in the viewport.

Everything works fine except the viewport centering. So I will be very thankful for any tip or idea to get to the final solution.

Best regards
Mat

https://drive.google.com/file/d/1-ZNiys_gsKjA3X3e5fGYZhqtmJmY7Ne3/view?usp=share_link

[Fernando]

Hi Matthias,

For reference, can you share the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Moreover, the image you provided is restricted as well. We can’t view it.

[Matthias]

Hi Fernando, I updated the link and offered the link with credentials.
Thanks in advance

[Fernando]

Thank you!

You need to change the min-height of the parent containers of these Containers to 100vh. They’re currently set to 600px.

Setting it to 100vh assures that they will take up the entire viewport.

Reference: https://docs.generateblocks.com/article/container-overview/#minimum-height

[Matthias]

I already tested the 100vh and the vertical centering, but it doesn’t work “perfect”.
Maybe you’ll have a look again. I changed it back to 100vh now.

[Matthias]

I found the problem 🙂 I doubled the anchor ID to a headline. That’s why it won’t center.

Thanks for refreshing my mind 🙂

[Fernando]

You’re welcome, Matthias!

[Author]

Posts