Mobile website looks great in chromes "developer tools" but is broken when I open the webp-CodePudding

I am very new to web design and am facing a frustrating issue. I created a mobile website and everything opens properly/looks great in all sizes on chrome developer tools. But when I open the website on any mobile device it is completely different, and the body is off-center and cut off on the left side of the screen (instead of being centered).

I am using

<meta name="viewport" content="width=device-width, initial-scale=1.0">

thinking my problem lies here. Maybe it's throwing off my display: flex property?

This may also have something to do with it:

.container {
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

.home-main {
    width: 100%;
    position: absolute;
    top: 8vmin;
    display: flex;
    justify-content: center;
}

Is there some way for me to troubleshoot my problem on mobile to try and better pinpoint what is going wrong?

CodePudding user response：

In dev tools there is a mobile phone / tablet icon on the top bar. Clicking on this allows you to test different phone sizes by dragging or selecting a device. It is most likely not

<meta name="viewport" content="width=device-width, initial-scale=1.0">

because I use this in all my projects and it doesn't cause this issue

CodePudding user response：

All browsers handle css differently. Ever heard of CSS browser prefixes? Autoprefixer CSS online may can help you. For your code like this:

.container {
    width: 100vw;
    height: 100vh;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.home-main {
    width: 100%;
    position: absolute;
    top: 8vmin;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}