[Support request] page hero full screen and responsive

Home Forums Support page hero full screen and responsive

  • This topic has 3 replies, 2 voices, and was last updated 4 months ago by Leo.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1515287
    Carlo

    Hi there,

    I am trying to make a page hero with a full screen background image + a login and a text.

    Please see attached link with my attempt.
    1) How can I make the image full screen and adapt to multiple screen views (on desktops, laptops and iPads) along with the login on the left and the text below the login visible?

    2) I’d also like to have a similar result on mobile but I am afraid I have to give up and think to a different layout?

    Thank you. Best wishes. Carlo

    #1515306
    Leo
    Staff
    Customer Support

    Hi there,

    Let’s take care of one issue at a time.

    1) Background images aren’t responsive by default so it’s tricky to deal with sometimes.

    In this case, what if we switch out the background image and use one specifically for mobile with this CSS?

    @media (max-width: 768px) {
        .page-hero.pageherohome {
            background-image: url(https://MOBILE-HERO-BACKGROUND-IMAGE)
        }
    }

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

    Let me know if this helps 🙂

    #1515794
    Carlo

    Hi Leo,

    thank you for your reply. The css @media call solution for the image for mobile is something I’ll definetely set.
    A) Do you suggest to do the same for images for laptop and iPad? There is no solution (in the header element’s settings or css) for “telling” the page hero to adapt to Desktop -> Laptop ?

    B) What about the position of the login box and the text? They are the most tricky part to me. For example, if I set things good for desktop monitor, the laptop viewport’s height is shorter and so the text disappear below the fold.
    Do I have to set different css @media calls or there’s something in the settings of the Header Element (or css) that can solve this?

    Thank you

    #1516688
    Leo
    Staff
    Customer Support

    A) You can use the same CSS I’ve provided above with different media queries here:
    https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

    Tablets are definitely tricky to deal with as they all have different breakpoints especially with landscape and portrait mode.

    B) I see that you’ve added some CSS for the form so you should be able to use media query to tweak them.

    For example, this CSS:

    .pageherohome .loginform {
        padding-right: 66%;
        padding-top: 60px;
    }

    Can be desktop only like this:

    @media (min-width: 769px) {
        .pageherohome .loginform {
            padding-right: 66%;
            padding-top: 60px;
        }
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.