Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Page Headers – how to position text?

Home Forums Support Page Headers – how to position text?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #389400
    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

    GeneratePress 1.4
    GP Premium 1.4.3
    #389787
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #390926
    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

    #391051
    Tom
    Lead Developer
    Lead Developer

    Hmm, what happens if you add this CSS?:

    .page-header-content {
        position: relative;
    }
    #391059
    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!

    #391230
    Tom
    Lead Developer
    Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.