My code is responsive to many screen resolutions but on an iPad and a Kindle Fire HDX , there is a large whitespace below the footer.
This is how it looks on an iPad
And this is how it looks on Kindle Fire HDX
Here a link to my code on codepen
What could be causing this problem?
It’s because your whole content has a height of only 847px which you can find using inspect element by hovering the <body> tag.
Whereas, iPad pro and Kindle has a min-height of 1200px plus, you can see that in the screenshot you provided. This is the reason for the whitespace, since the body has covered only 840px out of 1200px approx, rest of the area is left out as whitespace.
The content of the page is too less. That is the reason you have that white space on the screen.
