Question 402697 in Html Question posted in
Some basic documentation can be found here.

Html – 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…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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;

  2. 0

    I do not have an iPhone X to test on, but I can give you a couple ideas to understand what could be wrong.

    1. Because iPhone X is pretty old, there may be newer CSS features in your browser that are not present on the phone. caniuse.com gives you an overview of when certain features became available for general use. ‘vh’ units could be too recent for iPhone X.
    2. I see there is usage of positioning using ‘top’, and translates in order to create you 3 slides. This could be a bad mix to have together. You should try flexbox for the first slide. There can also sometimes be layering issues as ‘position: relative’ and translates can introduce different layering contexts.
    3. To debug this, you can use Xcode if you have a Mac with the iPhone simulators to try and recreate the issue. You fire up a simulator with an empty iPhone app, then go back to the home screen and open Safari and navigate to your website. Once there, you can open Safari on your mac and use the dev-tools to connect to your simulator to see exactly what is going on, change the CSS rules etc.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search