Mobile Header & No scrolling

Hi there,

- Can you activate the mobile header first and let me have a look?

- Hmm I'm not sure if there is a good way to do that unfortunately.

Can you try adding the slider as the page hero content and set the element to full screen?
https://docs.generatepress.com/article/header-element-overview/#full-screen

I'll see if there is a way to tweak it afterwards.

Let me know :)

Hi.

I was able to fix the header on mobile devices to be semi transparent. I created the header for the main page using your page hero content and had set the background for the menu area to fully transparent.

I tried to add the slider as a page hero but it does not show up. I think it is because the header was created with a page hero. You can't have two page heros on one page.... right?

So, I just need to know how to make the main page full HEIGHT on all devices. Any ideas?

Also, on this page https://lnftwd.com/contact/ we want the full width map at the bottom, so I created the page as a full width page, but there is a big space between the contact text and the form. Is there a way to make this part of the page not full width?

Thanks,
Leanne

You can combine the merge header and slider into one single header element.

Ok. The slider and menu are now all in the same page hero.

Now, is there a way to make the home page visible from the top bar to the footer, without scrolling, on all devices? I am ok with the slider of images being cut off on the right and/or left, I just want it to appear fully on the screen without scrolling on all devices.

Thanks so much for your help.

Leanne

Can you first try using the full-screen option for the page hero as suggested above?

Then we should just need to tweak some CSS to compensate for the footer height.

Sorry. It is now set to full screen.

Thanks

PS... let me know if I need to make the images a different size.

You will want to first make sure the slider is full-screen as well.

I'm on a 24" screen and see a white space at the bottom.

Then try this CSS:

.site-footer {
    margin-top: -53px;
    position: relative;
}

Hi,

I set the slider to full screen and put in your code. On some devices, I now see white space above and below the slider. On my android phone there is a huge amount of white space below the footer.

The images are 3840 x 1770 which is very large. Do you recommend resizing?

Thanks,
Leanne

What about adding VH. I don't know CSS very well. But from a search, I found that it might help.

What do you suggest?

Leanne

Looks like the slider itself is bigger than full-screen right now.

Can you double-check?

As I mentioned before, it's not very easy to make a page full screen without scrolling on all devices.

Hi,

The slider is Smart Slider 3. I was using the free version which did not have the full-screen option. I purchased the pro version and set it to full-screen.

I don't see any difference. What is next?

Thanks

Actually.... maybe it is working. What do you think?

Yup looks like it's all working to me :)