Header sizing on multiple screens?

[AK49_Logan_907]

Hi,

I’m using X Theme Pro and I think there was a recent update that added in another screen size. This kind of threw off my already bad header layout .

Currently, when resizing the screen from large to small the header text moves down then up while being resized. It’s super odd and unappealing. I’m assuming I’m using the wrong format somewhere. With a div. I did add a gap to help mitigate the issue but I’m sure there is a simple styling center option that can be added.

If you could provide a fix to this issue that has been bothering me for a long time I would greatly appreciate it.

Large Screen:

Small Screen:

[marc_a]

Hi @AK49_Logan_907,

Thanks for reaching out!

I just check your website and we are seeing a different layout.

Large Screen:

Small Screen:

Would you mind sharing more information on the outcome you want to achieve? In the meantime, you can watch the Responsive Styling video on how it works:

• https://www.youtube.com/watch?v=JCJkQazeRQU

Hope that helps.

[AK49_Logan_907]

Hi,

I’ve attached a new link. This page may be a better example. If you could try resizing your window you will notice the main Headline goes up and down and does not stay center.

We would prefer it stays center while being responsive instead of going up and down on the Y axis as it appears to look sloppy.

[friech]

Hi @AK49_Logan_907,

Thank you for the clarification, please remove all the Gap elements inside that Bar 2, and also set all the margins of the Headlines to 0.

Then set the Bar 2’s Flexbox Horizontal and Vertical align to Center.

Hope it helps,
Cheers!