“Fit To Screen” does not fit to screen

Hi,
I have exactly this problem. Do you have a solution yet?
Thanks!

Hi @sitesandsearch,

No, unfortunately I don’t have a solution yet.

I also noticed that the Fit To Screen option makes the section very small on Mobile. So until I find a way to properly fit a section to screen I set the Height of the section to Min Height of 100 VH. It still doesn’t take into account the header and extends the section more than it should but at least it looks better on Mobile than with the Fit To Screen option.

If you find a better solution, let me know. I’ll do the same.

Cheers

Hi, thanks for your reply.

I have the min-height on 70vh. My header is 116px. I gave the section and both columns a class with this css:

height: calc(100vh – 116px);

On desktop this looks like the solution see https://bit.ly/31gVSSE

On mobile I have to adjust the Heights.

Also, There is no footer now, so have to think about that.

Try this;
– add CSS classe to the section (myheight)
– add CSS rule :
.myheight .elementor-row {
height: calc(100vh – header-height-valuepx);
}

Momo, thanks this is really great! By adding .elementor-row I can set the height of the section to default, en the colmuns don’t need CSS.

Only on mobile/tablet I need to fix the header-height so it wil work there as well.

Have a nice day from Utrecht, The Netherlands!
Myra

Hi @sitesandsearch,

Could you explain step by step what you did to make it work?

I tried @momo-fr’s advice but it did not work for me..

Thanks in advance!

Hi @jokubas2000k,

first, give the section a class in tab “advanced” (here you see the margings, paddings, z-index, CSS ID, and CSS-classes.) You can think of a name yourself. For example “topsection” see https://prnt.sc/v27paa

2. Now go to the bottom tab “Custom CSS” (Elementor PRO) https://prnt.sc/v27pwo OR go to Customizer-> CSS.

Add there
.topsectie .elementor-row {
height: calc(100vh – 116px);
}

3. Click Save.
PS You will have to check the height of your header. My header is 116px, but yours might be different.

4. Check it:
Now, the black wordpress toolbar makes the page still scroll. You want to check the page without the black toolbar. So make sure to check it in incognito browser, so you are not logged in.

Hope this helps!

It worked!

Turns out there was an issue with the “-“. I retyped it and it works perfectly.

Thanks a lot @sitesandsearch & @momo-fr!

Have a nice day from Kaunas, Lithuania!
Jokūbas