javascripthtmlcssgithubgsap

CSS displays wrong on iphoneX

I'm working on a portfolio project and I'm running into errors I don't understand.

I just completed the responsive design for 480px and 768px screens. Here is the link to the site: https://tranthanhhthao.github.io/swinburne-contact/

Using the computer Chrome browser everything looks right 1. But when I use my iPhone X to view the web 2, the content of the second and third pages are pushed to the top.

Below are the screenshots.

on computer Chrome browser

on my iPhone X

Can someone please help me out... And guide me to fix this...

Solution

  • I have figured out what doesn't work on the iPhone X. It's place-content: center. I removed it and used a different technique to center content vertically.

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;