[Resolved] Mobile Header & No scrolling

Home Forums Support Mobile Header & No scrolling

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #988142
    Leanne Foulger

    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

    #988290
    Leo
    Staff
    Customer Support

    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 🙂

    #988399
    Leanne Foulger

    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

    #988416
    Leo
    Staff
    Customer Support

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

    #988432
    Leanne Foulger

    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

    #988494
    Leo
    Staff
    Customer Support

    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.

    #988496
    Leanne Foulger

    Sorry. It is now set to full screen.

    Thanks

    #988497
    Leanne Foulger

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

    #989001
    Leo
    Staff
    Customer Support

    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;
    }
    #989310
    Leanne Foulger

    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

    #989643
    Leanne Foulger

    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

    #989806
    Leo
    Staff
    Customer Support

    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.

    #990206
    Leanne Foulger

    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

    #990222
    Leanne Foulger

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

    #990241
    Leo
    Staff
    Customer Support

    Yup looks like it’s all working to me 🙂

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