media query width not change when resize-CodePudding

I'm doing some exercise about messenger website.The problem is the left div not change in the media query.When i use inspect in browser the width is linethroung i men it not show.The background color is work but width not work. Somebody know what's wrong.

Sorry for my bad english.

check the code here ---->https://jsfiddle.net/mwckd46u/

CodePudding user response：

it works I think you need to change your browser or browser settings

CodePudding user response：

Please just replace below css code.

body{
    margin: 0 auto;
}

.burger {
    display: none;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.left {
    width: 50%;
}

.right {
    width: 50%;
}



.burger-menu {
    width: 60px;
    height: 60px;
}


.logo-text {
    font-size: 80px;
    background: -webkit-linear-gradient(81.84deg, #0088FF -6.87%, #A033FF 26.54%, #FF5C87 58.58%);
    letter-spacing: -2px;
    font-weight: 650;
    margin-left: 5px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    margin-bottom: 10px;
}





.form:focus {
    outline: 2.3px solid #0a7cff;
}

::placeholder{
    color: grey;
    opacity: 60%;
    font-size: 17px;
}
.form {
    background-color: rgba(0, 0, 0, .04);
    display: block;
    margin-top: 10px;
    border-radius: 10px;
    margin-left: 5px;
    width: 300px;
    font-size: 19px;
    line-height: 16px;
    padding: 8px 16px;
    border: none;
}

.message {
    margin-left: 6px;
    margin-bottom: 35px;
    width: 70%;
    color: grey;
    font-weight: 100;
    font-size: 18px;
}

.logo {
    justify-content: flex-start;
    margin-top: 22px;
    margin-bottom: 10px;
    margin-left: 26px;
    width: 40px;
    height: 40px;
}

.menu {
    display: flex;
    justify-content: space-between;
}

.menu-items {
    display: flex;
    
}

:hover.items{
    border-bottom-style: solid;
    border-bottom-color: blue;
}

.items {
    float: right;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    margin-top: 35px;
    margin-right: 29px;
    color: inherit;
}



.block-pic2nd {
    margin-left: 10px;
}

.block-pic {
    display: inline-block;
    width: 25%;
}

.checkbox {
    margin-left: 10px;
    font-size: 17px;
    margin-top: 20px;
    margin-bottom: 20px;
    -webkit-user-select: none;
}

.block {
    display: block;
    margin: 10px 0 0;
}

.inline {
    display: inline;
}


.btn {
    font-size: 19px;
    margin-left: 10px;
    margin-top: 36px;
    height: 40px;
    padding: 2px 20px 0;
    color: white;
    background-color: #0a7cff;
    border-radius: 24px;
    border: none;
    margin-bottom: 10px;
}

.text {
    display: inline-block;
    font-size: 15px;
    margin-left: 19px;
}


.rightphoto {
    margin-left: 31px;
    margin-top: 59px;
    width: 1362;
    max-width: 100%;
}


@media (max-width: 767px) {
    .burger {
        display: block;
    }

    .items {
        display: none;
    }
    .right {
        width: 30%;
    }

    .left {
        width:100%;
        background-color: rgb(0, 0, 255);
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Messenger clone</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="style.css">
    </head>
        <body> 
            <div >
                <img  src="https://scontent-xsp1-1.xx.fbcdn.net/v/t39.8562-6/120009688_325579128711709_1736249742330805861_n.png?_nc_cat=1&ccb=1-7&_nc_sid=6825c5&_nc_ohc=Z2Ndj6QK8e8AX-qmjjD&_nc_ht=scontent-xsp1-1.xx&oh=00_AT_QySXE6ulYldmPEqWIL_4OWlqIrI4W5xHcM6QvKai-Ig&oe=6307F33D">
                <div >
                    <a href="https://www.messenger.com/rooms" >Rooms</a>
                    <a href="https://www.messenger.com/features" >Features</a>
                    <a href="https://www.messenger.com/desktop" >Desktop app</a>
                    <a href="https://www.messenger.com/privacy/" >Privacy and safety</a>
                    <a href="https://developers.facebook.com/products/messenger/" >For developers</a>  
                </div>
                <div >
                    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1024px-Hamburger_icon.svg.png">
                </div>
            </div>
                <div >
                    <div >
                        <h1 >Hang out anytime, anywhere</h1>
                        <p >Messenger makes it easy and fun to stay close to your favorite people.</p>
                        <input type="text"  placeholder="Email address or phone number">
                        <input type="password"  placeholder="Password">
                        <button >Log in</button>
                        <a  href="https://www.facebook.com/recover/initiate/?ref=www_reauth_page">Forgotten your password?</a>
                        <div >
                            <input type="checkbox" id="checkbox">
                            <label for="checkbox" >Keep me signed in</label>
                        </div>
                        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Download_on_the_App_Store_Badge.svg/640px-Download_on_the_App_Store_Badge.svg.png">
                        <img  src="https://lh3.googleusercontent.com/q1k2l5CwMV31JdDXcpN4Ey7O43PxnjAuZBTmcHEwQxVuv_2wCE2gAAQMWxwNUC2FYEOnYgFPOpw6kmHJWuEGeIBLTj9CuxcOEeU8UXyzWJq4NJM3lg=s0">
                    </div>
                    <div >
                        <img  src="https://scontent-kut2-1.xx.fbcdn.net/v/t39.8562-6/120973513_338186077283942_8148888802958728934_n.png?_nc_cat=1&ccb=1-7&_nc_sid=6825c5&_nc_ohc=Mqe5e0Rh1D8AX9Hh9l-&_nc_ht=scontent-kut2-1.xx&oh=00_AT91Kkl5PbuP5v-aydDDGxTTD6aVuxy2gy8lSuYuRMBaMg&oe=6309A6A7">
                    </div>
                </div>
    </body>
</html>