Vertical & Horizontal Align Content in a Row

[Modellsport_Schweigh]

Hello! I need help about the vertical alginment of my Page http://enterprise.der-schweighofer.at

I need the background image behind the menu and the content and 100% height of the screen size, then i need to align the content vertical & horizontal, but i find no option for this.

Can you help me?

Kind regards,

Michael

[thai]

Hi Michael,

@Modellsport_Schweigh

I need the background image behind the menu

I could see that you’re achieving to create 2 bars:

• One is static
• One is fixed

On your second bar, please check on the Hide Initially option. Currently, it’s overlap the first bar:

@Modellsport_Schweigh

the content and 100% height of the screen size,

I could see that your first section is 100% height of screen size now. But the second scroll bar is displaying on the right hand side:

To fix this issue, please change the height of second bar in your footer to auto:

Let us know how it goes!

[Modellsport_Schweigh]

Hello! First, thanks for you help!

The Bar Problem: I already had checked the “Hide initially” Option see -->

The Trigger doesent work. Normally the sticky bar should come @ 20% after scrolling.

The Height Problem: There i got a few Problems. I gave my row a class named “Hero_Text_Row” and put the following code in the row css:

.Hero_Text_Row {
    top: 50%;
    transform: translateY(-50%);
    left: 0;

}

Then i gave the Section “height:100vh;” on the inline CSS. On Desktop it all looks great, but when i look at my iPhone 7 in the Safari Browser, the Code doesen’t work and it does cut the complete row:

The Second Bar Problem: I fixed the Problem and changed the height in the second bar to auto.

[friech]

Hi @Modellsport_Schweigh,

@Modellsport_Schweigh

The Trigger doesent work. Normally the sticky bar should come @ 20% after scrolling.

For that matter, please adjust the Trigger Offset option.

To vertically and horizontally center the Row content, let’s use flexbox CSS instead.

Please update this:

.Hero_Text_Row {
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

To this:

@media (min-width: 980px) {
	.Hero_Text_Row {
	min-height: 100vh;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
}

Then add a Gap element (above ENTERPRISE SOLUTIONS headline), Gap with 7em size to offset the height of your first bar and totally (vertically) center the row content and to prevent the content from overlapping to the header on mobile view.

Hope it helps,
Cheers!

[Modellsport_Schweigh]

Hey! The Row Solution worked all fine. Thanks!

The Trigger Offset Solution not worked. I set the Trigger on 100 or -100 but its all time the same Triggerpoint. See in this Capture https://nimb.ws/72Qej4

Kind regards

[christian]

Hey @Modellsport_Schweigh,

100 won’t work for Absolute positioned bars because their height is deducted in the overall height of the page. I tried this setup in my test site. For ease of explanation, I used a 100px absolute positioned bar as the first bar and set the 2nd bar’s Trigger Offset to 200px. That triggered the bar right below the first bar unlike setting it to 100 where it kicks off immediately.

With that said, please try 200 or a higher value.

Hope that helps.