Celebrating 7 Years! Get up to $30 off GeneratePress Premium!

[Resolved] Move header text to bottom

Home Forums Support [Resolved] Move header text to bottom

Home Forums Support Move header text to bottom

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #542042
    Laura

    Hello –
    I would like the text of the page header to be at the bottom of the header image, and a bit off centered to the right, if possible. (Below the women’s faces.)

    I looked through the forum but could not get the custom CSS examples out there to move it from vertically aligned center.

    Under the content tab I have top and bottom padding set to 120 and left right set to 10.
    The containers are set to full width.

    I appreciate any advice and thank you!
    Laura

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #542235
    Leo
    Staff
    Customer Support

    Hi Laura,

    Give this CSS a shot:

    @media (min-width:769px) {
        #page-header-52 .page-header-content-container {
            padding-top: 240px;
            padding-bottom: 0;
        }
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know.

    #542287
    Laura

    Hi Leo! Thanks. On desktop that works like a dream. On mobile, the text walks off the page. Maybe because of the padding? But the header did not look good on mobile in the first place because the picture gets cropped to just the women in the middle. I think there is a thread somewhere on how to substitute a different header for mobile. @media or something…somewhere.

    I will look around for that. If you know of it or have advice, I will take it. Thank you!

    Laura

    #542480
    Leo
    Staff
    Customer Support

    Edited the CSS above so it only applies to desktop: https://generatepress.com/forums/topic/move-header-text-to-bottom/#post-542235

    Background images aren’t responsive by nature unfortunately. A wide image like that doesn’t really work well on mobile.

    One thing we can do is to switch out the background image and use one specifically for mobile. Would that work for you?

    #542827
    Laura

    Yes! I was trying to do that. I have seen threads about how to have a different image for mobile…but so far I have failed to successfully make it happen. That would be great! I’ve got my image ready to go. Thanks for being so responsive.

    I started on this CSS to make the words centered horizontally on mobile, and at a reasonable size for mobile. Working so far! I did not understand @media tags…but that was easy! Thanks!


    @media
    (min-width:769px) {
    #page-header-52 .page-header-content-container {
    padding-top: 240px;
    padding-bottom: 0;
    font-size: 6em;
    }
    }

    @media
    (max-width:769px) {
    #page-header-52 .page-header-content-container {
    padding-top: 100px;
    padding-bottom: 0;
    font-size: 3em;
    text-align: center;
    }
    }
    Laura

    #543041
    Leo
    Staff
    Customer Support

    The code to switch image for you would be:

    @media (max-width: 768px) {
        #page-header-52.generate-content-header {
            background-image: url(http://MOBILE-IMAGE-URL-HERE);
        }
    }
    #543080
    Laura

    I think you are the best. ๐Ÿ™‚
    Laura

    #543207
    Leo
    Staff
    Customer Support

    haha you are very welcome ๐Ÿ™‚

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.