Search code examples
htmlcssmedia-queries

Container cuts off when scrolling up on mobile

I have a survey page, where the body has background-color: #A71930, and a container with background-color: white, which holds the <form>, like this on a desktop:

desktop example

I have added these @media queries for mobile devices:

@media all and (max-width: 600px) {
  #survey-container {
    width: 100%;
    }
  }
  @media all and (max-height: 600px) {
  #survey-container {
    height: 100%;
    }
  }

These queries make the page look like this on a phone screen:

mobile example

This is good for now, but my issue is when you scroll to the bottom, then start going back up, this happens here:

the issue with the container

As you can see, when you scroll up, part of the container is cut off at the bottom, still leaving the <form> content. You can see for yourself here. So, what is causing this problem, and how can it be fixed? My full code can be viewed below(the issue does not seem to occur in codepen, so only try the issue in a mobile browser): https://codepen.io/jerryd2304/pen/qvERZL

Solution

  • I was able to replicate this in Mac/Safari (12.0.3), but not Chrome or Firefox.

    Fix 1:

    Remove the height: 100% altogether.

    Fix 2:

    Change height to min-height:

    @media all and (max-height: 600px) {
  #survey-container {
    min-height: 100%;
  }
}

    Either way, the problem is resolved:

    enter image description here