[Resolved] Page Headers – how to position text?

[Roland]

Hi there,

I wanted text over background images in page headers to be vertically positioned somewhere in the last third of the page header. I did it this way:

.page-header-content-container {
    padding-top: 40%;
    padding-bottom: 5%;
}

/* Text im Page Header auf mobilen Geräten noch weiter nach unten drücken */
@media (max-width: 768px) {
.page-header-content-container {
    padding-top: 80%;
    padding-bottom: 5%;
    }
}

It work’s fine on most browsers, but I have still questions:
1. Is this the way you would recommend?
2. Isn’t there something like “vertical-align: bottom” which I could combine with a small “margin-bottom”?
3. Is my CSS compatible to the option Page Headers, Content, Vertical center content?
4. In Firefox the text is pushed too far, the box is beneath the background image. You can reproduce this issue when you load e.g. http://www.fuer-starter.de/team/ and change the size of your firefox window to mobile size. That occurs only in Firefox – IE, Chrome, Safari … are working fine.

If you’re busy question no. 4 is the most important for me …

My site

Roland

[Tom]

Perhaps instead of using padding, use absolute positioning.

First, set your padding (top/bottom) to something like 5%.

Then do this:

.page-header-content-container {
    position: absolute;
    bottom: 30px;
}

[Roland]

Hi Tom,

thank you for the hint and sorry for my late answer.

Your CSS is exactly what I was looking for. Great! I changed also 30px to 1em so that there is no need any more for a media query. This CSS works fine on most devices, as far as I can see:

.page-header-content-container {
    padding-top: 5%;
    padding-bottom: 5%;
    position: absolute;
    bottom: 1em;
}

There only is one small problem left: On a Android Smartphone with Firefox the text jumps to the bottom of the page header when you scroll down some pixels. When you scroll up again the text jumps back to the correct position.

As you can’t see this in Firefox for Windows, not even with <Ctrl><Shift><M>, here a two screenshots:
Page freshly loaded
Page scrolled down

This is only on the homepage, all other pages are working fine.

On the homepage the page header is followed by a section, on the other pages the page header is followed by normal text. Perhaps this could be the reason for the wired behavior of Firefox Android?

Roland

[Tom]

Hmm, what happens if you add this CSS?:

.page-header-content {
    position: relative;
}

[Roland]

That’s it.

I’ve read about the fact, that if I use position: absolute then I have to write position: relative into the parent element. I just didn’t know how to identify the parent element …

Thank you so much!

[Tom]

You’re very welcome!

[Author]

Posts