Reputation: 391
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:
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:
This is good for now, but my issue is when you scroll to the bottom, then start going back up, this happens here:
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
Upvotes: 1
Views: 924
Reputation: 19119
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:
Upvotes: 1