I have a footer tag on my site which for some reason is out of view, or partly out of view on a nice amount of mobile devices. (I know this through using my browser's developer tools), it can be pulled in to view, but it doesn't stay in view, it gets pulled down again.

The CSS I implemented might be causing this but I *need* it in order to have the footer stay at the bottom of the page in all cases. (as explained in [this question](https://stackoverflow.com/questions/67634846/how-can-i-make-footer-stick-to-bottom-of-screen-when-content-is-short-and-to))

This is basically the code for my footer:

```css
html {
  height: 100%;
}

main {
  padding-right: 200px;
  padding-left: 200px;
  background-color: white;
  flex: 1 0;
}

body {
  background-color: #80cbc4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  text-align: center;
  background-color: #d9efef;
  height: auto;
  flex: 0 0;
}
```

```html
<html>

<body>
  <main>
    page content
  </main>
  <footer>
    <p style="direction:rtl;">
      רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. <a href="http://cs.haifa.ac.il/~shuly/publications/lre4h.pdf">"Language Resources for Hebrew."</a> Language Resources and Evaluation 42(1):75-98,
      March 2008. [<a href="https://yeda.cs.technion.ac.il/files/citations/bibtex/hebrew-resources.txt">BibTeX</a>]
    </p>
  </footer>
</body>

</html>
```

This problem happens on these devices (as emulated by my browser's developer tools):

* Pixel 2/2 XL
* Kindle fire HDX (footer can't even be pulled in to view)
* iPhone X/6/7/8 Plus
* iPad/iPad Mini/iPad Pro
* Surface Duo
* Blackberry PlayBook
* Nexus 6/6P/7/10
* Nokia N9

and not other ones (e.g. desktops), which means that the code above probably doesn't show the problem for other users.

Note:
I've been checking all the options in my dev tools, which means I've included in the list above also some uncommon devices.

Also,

> 
> Realize that the emulator does not provide the same experience as a person with an actual Pixel 2 XL device would have. They may have the same resolution, but other behaviors may, and probably will, differ. – Heretic Monkey
> 
> 
> 

Which means this might be happening only in my emulator.

This is what the problem looks like:

[![what the footer looks like](https://i.stack.imgur.com/1TmtU.png)](https://i.stack.imgur.com/1TmtU.png)

How can I make my footer come back in to view on all devices?