Single CSS Media Query Not Applied When The Rest Are

Question

I have several styles in a media query yet one is never applied, why is this? eg my font size changes correctly but the width of #contact is always 40%.

    font-size: 10px;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px){

    html {font-size: 6px;}
    
    .masthead-text > h2 { visibility: hidden; }


    #contact { width: 80%; }
    input, textarea { font-size: 32px; }

}


#contact {
    width: 40%;
    margin: 0 auto;
}

.form-group {
    text-align: center;
}

input {
    width: 97.7%;
    margin-top: 1em;
}

textarea {
    width: 100%;
    margin-top: 1em;
}


#submit {
    width: 50%;
    margin-left: 25%;
}

<html lang="en">
<head>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>L's Landscaping</title>
</head>
<body>
    <header>
     ...
    </header>
    <main>
        <section id="about">
        </section>
        <h1>Drop us a line!</h1>
        <section id="contact">
                <form id="real-form">
                    <div class="form-group">
                        <input type="text" id="Name" placeholder="Your Name" required>
                    </div>
                    <div class="form-group">
                        <input type="email" id="Email" placeholder="Your Email Address" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" id="Phone" placeholder="Your Phone Number" required>
                    </div>
                    <div class="form-group">
                        <textarea id="Message" rows="10" maxlength="1000" placeholder="Your Message" required></textarea>
                    </div>
                    <input id="submit" type="submit">
                </form>
        </section>
    </main>
</body>
</html>

Answer 1

Try using max-width and min-width instead of max-device-width and min-device-width .

The width of the render surface for the display device is deprecated by level 4 of the Media Queries specification module.

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Single CSS Media Query Not Applied When The Rest Are

Question

1 answers

solution1
2 2020-11-03 23:53:32

Single CSS Media Query Not Applied When The Rest Are

Question

1 answers

solution1 2 2020-11-03 23:53:32

solution1
2 2020-11-03 23:53:32