[Resolved] how to set Hero Page on mobile

Home Forums Support how to set Hero Page on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1252918
    gabriele

    Good morning, evening or whatever,

    I’m new on generate press and I’m not too expert with CSS, I’ m facing a problem with my hero page. I would like to do it more responsive on mobile.
    It’s possible to set out a hero page version just for mobile? I could produce a specific header image in that case.

    Many thanks for your help.

    PS: generate press is fantastic 🙂

    #1253075
    David
    Staff
    Customer Support

    Hi there,

    if you want to set a different background image for mobile then do this:

    1. Edit the Header Element – in the Element Classes field add: mobile-hero
    2. Add this CSS with the URL for your new background image:

    @media(max-width: 768px) {
        .page-hero.mobile-hero {
            background-image: url(full_url_to_your_image_goes_here);
        }
    }

    Let us know if that helps

    #1253215
    gabriele

    Many thanks David

    #1253262
    David
    Staff
    Customer Support
    #1567887
    Sarah

    Not sure if this requires a new post, or a continuation of this one.
    I have unique Header Elements for each of my webpages as each page has a different hero-image. I’m assuming the solution David provides in post #1253075 is a site-wide blanket solution. What do I need to do so that I can target specific Header Elements for individual pages?
    Thanks

    #1568309
    David
    Staff
    Customer Support

    Hi there,

    there are a few methods for switching the background image.All of which require a little code.
    If you want to start a new topic ill be happy to go through that with you.

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