[Resolved] Mobile Header & No scrolling

[Leanne]

Hi,

Please look at the main page of the website I attached to this message.

When you look at the header on a desktop computer you see a faded white area behind the menu and logo. That is what I want. But, we you go to a cellphone the white part is a little big. How can I make it smaller?

NOTE: I have mobile header turned OFF. If I turn it ON, and look at it on my cellphone the log is to the left and the menu is to the right (which is what I prefer, but the faded white does not appear behind the logo and menu making them very difficult to see. I hope this is clear.

My second problem is…. 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 for you help.
Leanne

[Leo]

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 🙂

[Leanne]

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

[Leo]

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

[Leanne]

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

[Leo]

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.

[Leanne]

Sorry. It is now set to full screen.

Thanks

[Leanne]

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

[Leo]

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

[Leanne]

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

[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

[Leo]

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.

[Leanne]

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

[Leanne]

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

[Leo]

Yup looks like it’s all working to me 🙂

[Author]

Posts