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

[Resolved] how to keep header jpg centered on mobile device

Home Forums Support [Resolved] how to keep header jpg centered on mobile device

Home Forums Support how to keep header jpg centered on mobile device

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #596781
    Ray

    Greetings.

    I am attempting to use a jpg in the header of a site,
    and the name of the product appears in the center of the
    jpg, and in the center of the header on a PC.

    It works so well on a PC that I can hide the site Title
    in Customizations. Then I kept the tagline visible, for
    a nice combo of photo & tagline…

    But on a smartphone, the jpg is no longer centered, while the
    tagline remains front/center. The left third of the jpg becomes
    centered. That’s a movement of about the width of 35 text letters.

    I tried to fix this by adjusting settings in Customization –>
    Layout –> mobile header

    question 1

    Why does the header disappear on a smart phone when the
    mobile header setting is “ON”? Seems backwards?

    question 2
    Is there a combination of settings in Customization, or with
    CSS that will keep the jpg image centered on a mobile phone?

    Currently I have these settings:

    custom…layout…header
    header width…full
    Inner header …contained
    header alinment…center
    mobile header… off (can’t see it if “on”)

    custom…background images…header
    no repeat
    cover
    attachment
    position: no entries

    Thanks in advance for any suggestions.

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #596866
    Leo
    Staff
    Customer Support

    Hi there,

    Q1: Mobile header is a simplified header which hides removes the normal header. Since you don’t seem to have a logo, I would recommend disabling that option.

    Q2: Try this CSS:

    @media (max-width: 768px) {
        .site-header {
            background-position: center;
        }
    }

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

    Let me know 🙂

    #596896
    Ray

    Q1
    Thanks! I will try it with a logo also.

    Q2
    Perfect! Thank you so much!

    #596897
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.