This is caused by the site thinking the orientation has changed from portrait to landscape due to the keyboard being opened.

The keyboard covers some of the site, which in takes up screen real estate, which causes enough of a resolution change for it to be detected as landscape mode. If the keyboard is hidden somehow, or a Bluetooth keyboard is connected, the site looks correct. I've attached screenshots to illustrate the issue.

After some searching around, I found this site. It appears that adding an orientation media query may solve this resolution loophole. Here's their example for the iPhone 6 in portrait:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Update: Also check out this CSS-Tricks page, they have similar information with more cross-platform examples.

With keyboard open:

With keyboard hidden (I simulated this by connecting a Bluetooth keyboard):