page hero full screen and responsive

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 :)

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

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;
    }
}