elementor/elementor

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

MarkCodesTheWeb opened this issue · 48 comments

MarkCodesTheWeb commented

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 commented

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 commented

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.

  • 👍1
arielk commented

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 commented

@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 commented

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

carlosnpz commented

Still no solution for this issue?! OMG

useyourblinker commented

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!

  • 👍4
volkantash commented

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

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

Deleted user commented

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

chris-adfury commented

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

  • 👍2
wwwflexistampscom commented

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

your-spark commented

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 :-)

  • 👍2
Deleted user commented

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 commented
Deleted user commented
mattiasghodsian commented

Here's my solution

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

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

  • 👍2
yescreative commented

This bug seems to have reappeared with the latest update

manhdh89 commented

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

RafaelDeJongh commented

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 commented

Fit to screen is not working on mobile since the last update. See screenshots.
screenshot-redplanet agency-2019 05 01-23-59-03
screenshot-redplanet agency-2019 05 01-23-59-43

RafaelDeJongh commented

@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 commented

using 100vh is not working good with video background

I-andrew-I commented

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 commented

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.

  • 👍1
idocme commented

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

tomafrialdi commented

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

  • 😄1
dave-gil commented

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 commented

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.

  • 👍1
owlyowl commented

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 commented

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

Allan-Acapla commented

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

Deleted user commented

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 commented

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

fxaviers commented

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.

  • 👍2
galiainfographics commented

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

Deleted user commented

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 commented

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

Deleted user commented

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

DuerrundSteidle commented

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?

  • 👍1
zainulaabdin commented

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

  • 👍3
davidefiorio commented

Not Working!

volkantash commented

Not Working!

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

ogio commented

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

sebestyn commented

Same problem here. Please resolve!

volkantash commented

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

Tsynskyy commented

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 commented

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

That's it !