Header full page

  • Resolved eshalabs

    (@eshalabs)


    6 years, 10 months ago

    Hello all,

    I could really use some help with the homepage we want to create.
    As you can see on the website http://www.decocq.com, we want our visitors to see text + some shortcut menu’s as a frontpage. We want the image slider in the background to be ‘fit to screen’ on desktops and perhaps even tablets. However, there are beautiful websites that have these images full screen, like for example http://www.urbanplatform.com/ (this probably isn’t an Elementor website). The problem I have is that the option ‘fit to screen’ really makes the background height as large as the screen resolution. That is fine, but I want it to be to the edge of my browser and then stop there, not create a scroll bar. It seems like the ‘fit to screen’ function doesn’t consider the header I’m using (also Elementor Pro). I hope you understand what I mean. I don’t want to have the ‘fit to screen’ function and then get a background with scrollbar as a page.

    Please help me fix this.. I can set the margin to -142 (height of the header + menu), but that only fixes it for my screen. When I look at the website at other laptops/PC’s, there are white gaps at the bottom.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Donna Fontenot

    (@cavalierlife)

    6 years, 10 months ago

    If the height of your header is set at 142px, it should be 142px for everyone. In any case, try min-height together with vh instead of fit to screen.

    The Fit to Screen option won’t work the same way on mobile and that’s because browsers just don’t support it properly on mobile. We recommend using the “Min Height” option for the section instead and set it to 100vh (100% of the viewport’s height) which will perform the same way as the Fit to Screen option, but the difference is this will also work on mobile devices.

    To accommodate the height of the header, after setting 100vh in the section’s Layout tab for Min Height, then go to the Section’s Advanced tab, and under Custom CSS, put:

    selector {
    height: calc(100vh – 142px);
    }

    Actually, if you aren’t using Pro, you won’t have the Custom CSS option, so you’ll need to give the section a class name, and then go to Appearance > Customize, and put the following in the Additional CSS (changing .mysectionclass to whatever class name you gave the section):

    .mysectionclass {
    height: calc(100vh – 142px);
    }

    Can’t guarantee this will work, and we don’t actually support custom code here, but it’s a start. It’s a sticky problem that others have had before, and I don’t know if there is a foolproof method for making this work everywhere, but that’s the best solution to my knowledge.

    Thread Starter eshalabs

    (@eshalabs)

    6 years, 10 months ago

    Hello @cavalierlife,

    EDIT: It works after disabling a plugin. Thank you so much!

    • This reply was modified 6 years, 10 months ago by eshalabs.
    Donna Fontenot

    (@cavalierlife)

    6 years, 10 months ago

    Happy to hear that!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Header full page’ is closed to new replies.