Section Height "Fit to screen" does not work on mobile

[MarkCodesTheWeb]

Hi,

I'm not sure if this is an issue already reported but after searching Google for a while I figured I would just comment here. I made a full page header section very easily by making the section height "fit to screen" and adding a fixed background image. The problem is when the screen size is reduced to tablet/mobile sizes the section shrinks to only the size of the content within it. Is this a bug? Or am I doing something wrong? I can't find any other settings built in so I'll probably have to write some custom CSS to override it.

[joshmarom]

You are right. fit to screen is not currently supported on mobile due to some technical problems.
Let me try to break it down:

To achieve the fit-to-screen look we use the css value height: 100vh. this setting sets the section's height to no more and no less than the viewport height.
This works quite well in desktop. However, in mobile, it often results in the content overflowing beyond the section's height.

Although we could use min-height: 100%, which would allow the section to become higher than 100vh if content overflows, it would consequence in a different problem: vertical alignment of the columns in the section (which is commonly combined with fit to screen sections) is not possible when parents height isn't set explicitly.

This is why we currently do not have a solution for fit to screen in mobile.
Any suggestions for resolving this problem would be most welcomed.

[MarkCodesTheWeb]

Thanks @joshmarom . I just added a custom class to that section and gave it height: 100vh which is ok for the most part. It actually just zooms into the background image's center which worked well but for some some reason the image I put in the center of the content was moved up to the top. It's actually a good error though because, in my opinion, it looks good at the top on mobile. Here is the site I'm suing it on. It's just a one page experiment for now while I build out the rest. http://thealternation.net

If I come up with a solution at any point or find something that works better I'll let you kno.

[arielk]

In the next version (1.5) we have added a responsive control of the Min-height by device. I think it will solve your problem.

Thanks for your feedback.

[useyourblinker]

@arielk On the recent iterations of Elementor, I do not see min-height by device on my sections. Is this something that is now NOT available? I am encountering these same hurdles, but other than setting some margin in Mobile (at the top of the section) to move things down a bit - I don't seem to have any way to adjust this in mobile VS desktop!

[sarahdenise]

Hi, I found the answer by carasmo on a separate thread:
https://github.com/pojome/elementor/issues/1267#issuecomment-297798133

[carlosnpz]

Still no solution for this issue?! OMG

[useyourblinker]

The 'fit to height' CSS is simply not obeyed by mobile browsers.

In my opinion - this makes it useless - and Elementor should change how it does height. When I do height: 100vh; it seems to obey things.

However - the correct solution for most applications that I can find is to just set Minimum Height (instead of 'Fit to screen') and then set it to 100 vh.

This makes it full screen on ANY device. It's probably what should be done when you actually want full screen!

[volkantash]

We are working on the fullscreen solution.
https://jsfiddle.net/deveb/9e137xqg/

for more: https://data-deveb.github.io/1.0/en/

[ghost]

Fit screen problem still exists on the mobile device. Please fix this issue asap.

[chris-adfury]

Any suggestions for resolving this problem would be most welcomed.

Why not use this as the css with the full screen selector:

.full-height {
min-height: 100vh;
}
@media only screen and (min-width: 768px) {
.full-height {
height:100vh;
}
}

[wwwflexistampscom]

My website is https://www.flexistamps.com
But cannot fit mobile device
If any please suggest me

[your-spark]

Hey there,
I found a way to solve this...
after wondering why it worked somehow with the "slider" widget I found that you have to set the screen size to "min. high" instead of "fit to full screen". After that you can switch the unit from px to vh and set it to 100. That's it!

I hope it will help for everyone who almost lost ones mind... just as I almost did :-)

[ghost]

What if I want to divide the screen in two with hero image at 75vh and the next section to take up the rest at 25vh? I can’t get this to work and It’s driving me nuts.

[your-spark]

Hey Lee-Anne, I think it is because your image is probably higher than the 25% allow it to be. So one solution would be to insert your image as the background oft he section instead of pulling it in as an image. The other option would be to set the size oft the image manually to a value where the hight is lower than 25% oft he full screen size of your device. Let me know if that helped! Greetings from Berlin, Germany. Robin Von: Lee-Anne Ekland <notifications@github.com> Gesendet: Sonntag, 17. Februar 2019 17:55 An: elementor/elementor <elementor@noreply.github.com> Cc: your-spark <robin.schaarschmidt@your-spark.com>; Comment <comment@noreply.github.com> Betreff: Re: [elementor/elementor] Section Height "Fit to screen" does not work on mobile (#630) What if I want to divide the screen in two with hero image at 75vh and the next section to take up the rest at 25vh? I can’t get this to work and It’s driving me nuts. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#630 (comment)> , or mute the thread <https://github.com/notifications/unsubscribe-auth/AtG2ivpzTpq3N6fT9SKLNJKK65-ZpoTvks5vOYl7gaJpZM4KFih0> . <https://github.com/notifications/beacon/AtG2ivLdQgiYbudNiQmskxFPzkDV1mXmks5vOYl7gaJpZM4KFih0.gif>

[ghost]

Thank you so much for your reply! I had the image set as the section background at 75vh and the second section doesn’t have an image. I thought if they both added up to 100vh it would work but it doesn’t. I keep having to readjust. Landscape view is even worse.

On Sun, Feb 17, 2019 at 10:24 PM your-spark ***@***.***> wrote: Hey Lee-Anne, I think it is because your image is probably higher than the 25% allow it to be. So one solution would be to insert your image as the background oft he section instead of pulling it in as an image. The other option would be to set the size oft the image manually to a value where the hight is lower than 25% oft he full screen size of your device. Let me know if that helped! Greetings from Berlin, Germany. Robin Von: Lee-Anne Ekland ***@***.***> Gesendet: Sonntag, 17. Februar 2019 17:55 An: elementor/elementor ***@***.***> Cc: your-spark ***@***.***>; Comment < ***@***.***> Betreff: Re: [elementor/elementor] Section Height "Fit to screen" does not work on mobile (#630) What if I want to divide the screen in two with hero image at 75vh and the next section to take up the rest at 25vh? I can’t get this to work and It’s driving me nuts. — You are receiving this because you commented. Reply to this email directly, view it on GitHub < #630 (comment)> , or mute the thread < https://github.com/notifications/unsubscribe-auth/AtG2ivpzTpq3N6fT9SKLNJKK65-ZpoTvks5vOYl7gaJpZM4KFih0> . < https://github.com/notifications/beacon/AtG2ivLdQgiYbudNiQmskxFPzkDV1mXmks5vOYl7gaJpZM4KFih0.gif> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#630 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQSIifpMPvYELl3pTFPcHsEBsA2Utperks5vOkb9gaJpZM4KFih0> .

-- Have a gorgeous day! Lee-Anne Ekland, founder, proupdpupmedia.com <https://proudpupmedia.com/> *web development & design | content management | web services* phone or text to: 778.839.0696

[mattiasghodsian]

Here's my solution

@media (max-width: 768px) {
    .elementor-section-height-full,
    .elementor-section-height-full > .elementor-container   {
        height:100vh!important;
    }
}

[RafaelDeJongh]

This bug seems to have gotten back with the new flexbox introduction?

[yescreative]

This bug seems to have reappeared with the latest update

[manhdh89]

I have bought theme using elementor. But this problem has not fixed. :(

[RafaelDeJongh]

I have bought theme using elementor. But this problem has not fixed. :(

Bough Elementor Pro you mean? Well that wouldn't change this exact problem.

In the mean time I would suggest rather than using the option fit to screen, to use the min-height and set it to 100VH instead so then you know it's full width on all breakpoints!

@joshmarom & @arielk any updates on this?

[wpfuse]

Fit to screen is not working on mobile since the last update. See screenshots.

[RafaelDeJongh]

@wpfuse

It's been there for various version already that this bug is present.

I suggest you to just use thee 100VH property instead.

[manuel-84]

using 100vh is not working good with video background

[I-andrew-I]

Wow... new user, just ran into this problem.

This:

@media (max-width: 768px) {
.elementor-section-height-full,
.elementor-section-height-full > .elementor-container {
height:100vh!important;
}
}

seems to work at first, but if a phone is flipped from vertical to horizontal, the sections overlap.

[RafaelDeJongh]

Wow... new user, just ran into this problem.

This:

@media (max-width: 768px) {
.elementor-section-height-full,
.elementor-section-height-full > .elementor-container {
height:100vh!important;
}
}

seems to work at first, but if a phone is flipped from vertical to horizontal, the sections overlap.

You might want to make a separate media query for landscape viewport and adjust accordingly. Though I barely see people use websites in landscape mode to be honest.

[idocme]

the year is almost 2020 and still no solution for this..

[tomafrialdi]

i got the solutions guys.
please click buy button or go pro button

[dave-gil]

so what's the solution? This is a problem even in the pro version as far as I'm aware?

Solutions suggesting min-height 100vh dont take into account of the header height and usually result in the section overshooting...

[LuisEduardoPS]

Usually the 100vh height will account for the adjusted height, with is why you'll sometimes see mobile pages go funky when the browser's address bar slides down.

For browsers that don't account for the sliding bar within the vh unit: The height for the address bars will not be constant across the browsers.

So I'd advise against 100vh only or 100vh with a predefined px number subtract appended.

My advice is setting the height of the section/column (using javascript) with the window.innerheight property.

FIRST:
Set the proper ID for the section and/or column that you want.

SECOND:
Add the javascript code in the page (in my case I had to stretch both section and column)

function resetHeight(){
	// reset the section/column height to that of the inner browser
	document.getElementById("section-before-scroll").style.minHeight = window.innerHeight + "px";
	document.getElementById("column-inside-section-before-scroll").style.minHeight = window.innerHeight + "px";
}
// reset the height whenever the window's resized
window.addEventListener("resize", resetHeight);
// called to initially set the height.
resetHeight();

How can I add the JS code? Well, I use a plugin called Scripts and Styles.

Hey @joshmarom , I bought your PRO version and I asked for a solution but I could not find so I got this solution.
Would it be possible you add this option in the columns and sections? An option to use JS to stretch vertically (because you already have an similar option to JS width section) both in column widget and section widget.

[owlyowl]

I don't see this issue as closed. Because even though min height for responsive modes was added it does not work.

Steps to reproduce

1. Add fit to screen for a section for desktop update

2. Click responsive and then mobile and specify 100vh and update

View in browser and either the section height on desktop is just broken or an arbitrary height and mobile is also broken

[etegan]

This issue should be reopend... Although there are workarounds the feature obviously does not work on mobile devices. Great product otherwise! ^^

[Allan-Acapla]

Hello Peeps

I'm new to Elementor, and have no code experience but after some research I found this solution that worked for me. Not sure if it will work for the rest of you, but I say give it a try

Set 100vh Height AND add CSS (advanced tab->Custom CSS)

CSS:

body {
overflow: hidden;
}

[ghost]

I agree this should be reopened. How this is still a problem in 2020 with Elementor when practically every site should be responsive, is beyond me. Considering exploring other page builders now...

[MrWood93]

This problem still persists as of 16/07/2020. It would be useful if this was fixed ASAP!

[fxaviers]

This issue should be reopened.
Also @arielk, there could be a warning explaining: "Fit to screen" does not work with mobile devices, instead, use "minimum height 100VH".
This would make life easier for users, without having to waste time looking for a problem that has been known for so long.

[galiainfographics]

problem still persists 04/09/2020
Hope Elementor can pick up the gauntlet soon..

[ghost]

We can dream. We've gone up to a new major version with only two minor improvements, yet the good and well wanted suggestions here on github just slip under the radar including many that have been going on for years 👀

[arielk]

@groovybluedog Have you tried this solution? #630 (comment)

[ghost]

I've been going crazy because of this, and it was because it's not fixed yet (17/12/2020).

[DuerrundSteidle]

Why is that closed?

The error is still available?

With this code it works

@media (max-width: 768px) {
    .elementor-section-height-full,
    .elementor-section-height-full > .elementor-container   {
        height:100vh!important;
    }
}

Is it not possible to integrate this?

[zainulaabdin]

Looks like 100VH is working if you set padding and margin of the section to zero.

[davidefiorio]

Not Working!

[volkantash]

Not Working!

Did you try this?
https://jsfiddle.net/deveb/9e137xqg/

[ogio]

Hey, 22 april 2021, still issue not resolved? Please!

[sebestyn]

Same problem here. Please resolve!

[volkantash]

Result is here. Look last codes.
mozilla-mobile/fenix#18910

[Tsynskyy]

Hey there, I found a way to solve this... after wondering why it worked somehow with the "slider" widget I found that you have to set the screen size to "min. high" instead of "fit to full screen". After that you can switch the unit from px to vh and set it to 100. That's it!

I hope it will help for everyone who almost lost ones mind... just as I almost did :-)

omg, that worked, thank you!

[yannickBurky]

Looks like 100VH is working if you set padding and margin of the section to zero.

That's it !