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

[Support request] Page Header Image – adjust size for mobile

Home Forums Support [Support request] Page Header Image – adjust size for mobile

Home Forums Support Page Header Image – adjust size for mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #465129
    Angela

    I have used the page header to show a full screen image on my customers website, but i cant find how to reduce the size of this image for Mobile phone sizes, looks good on Desktop and table, need to adjust for mobile, can you help please

    Many Thanks
    Angela Franklin
    Email: angfranks@msn.com

    GeneratePress 2.0.1
    #465193
    Tom
    Lead Developer
    Lead Developer

    Background images work with the aspect ratio of the screen, which is why it’s usually best to float text on top of the image, and make it so the image can be cut off without affecting the design.

    You can force the image to be 100% width on mobile, but you might end up with empty space near the bottom of the screen:

    @media (max-width: 768px) {
        .generate-content-header {
            background-size: 100% auto;
        }
    }

    I would suggest removing the text from the image, and adding it into the page header content area instead.

    #492763
    Tiago

    Is it possible to add a Mobile specific image? Faster loading and even layout opportunities (since deskotps are wide and mobile tall) or even the possibility to style it differently on a mobile site. Or even to be able to use a custom field one (thinking ACF).

    thanks!

    #492995
    Leo
    Staff
    Customer Support

    Hi there,

    You can switch it out specifically for mobile with this:

    @media (max-width: 768px) {
        .generate-content-header {
            background-image: url(http://URLHERE)
        }
    }

    For more help on this, please open a new topic.

    Thanks!

    #988418
    Anthony

    I’m trying to test this out but it’s not working for me.

    #988419
    Leo
    Staff
    Customer Support

    Can you link me to the page in question?

    #988420
    Anthony

    Leo, I changed .generate-content-header to .page-hero and got it working.

    Thanks!

    #988422
    Leo
    Staff
    Customer Support

    Ahh yeah glad you’ve figured out 🙂

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