Why media query is not working to the range between 0px and 767px?

Question

last media query is not working.

This is my HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Menu</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <meta name="veiwport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>Our Menu</h1>
    <div class="box col-lg-4 col-md-6 col-sm-12">
        <div class="section">

            <h2 style="background-color: #FFB6C1">Chicken</h2>
            
            <p>lorem ipsum dolor sit amet, consectetur adipisicing elt, sed do eiusmod tempor incididunt ut lobore et dolore magno aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commondo consequot.</p>
            
        </div>
    </div>
    <div class="box col-lg-4 col-md-6 col-sm-12">
        <div class="section">
            <h2 style="background-color: #FF0000; color: white">Beef</h2>
            
            <p>lorem ipsum dolor sit amet, consectetur adipisicing elt, sed do eiusmod tempor incididunt ut lobore et dolore magno aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commondo consequot.</p>
            
        </div>
    </div>
    <div class="box col-lg-4 col-md-12  col-sm-12">
        <div class="section">
            <h2 style="background-color: #FFFF00">sushi</h2>
            
            <p>lorem ipsum dolor sit amet, consectetur adipisicing elt, sed do eiusmod tempor incididunt ut lobore et dolore magno aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commondo consequot.</p>
            
        </div>
    </div>
</body>
</html>

This is CSS code:

*{
    box-sizing: border-box;
    font-family: "Comic Sans MS", cursive, sans-serif;
}
h1{
    text-align: center;
    font-size: 1.75em;
    margin-bottom: 1.5em;
    color: red;
}
.box{
    padding: 0.5%;
}
h2{
    border-bottom: 5px solid black;
    border-left: 5px solid black;
    font-size: 1.25em;
    width: 5em;
    text-align: center;
    float:right;
    margin: 0px;
    position: relative;
    top: -1px;
}
.section{
    border: 5px solid black;
    background-color: lightgrey;
    float: left;
}
p{
    clear: both;
    margin-left: 0.5em;
    margin-right: 0.7em;
    margin-top: 2.5em;
}

@media only screen and (min-width: 992px){
    
    .col-lg-4{
        width: 33.33%;
        float: left;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px)
{
    .col-md-6{
        width: 50%;
        float: left;
    }
    .col-md-12{
        width: 100%;
        float: left;
    }
}
@media only screen and (min-width: 0px) and (max-width: 767px)
{
    .col-sm-12{
        width: 100%;
    }
}

the media class for device between 0px and 767px is not working as I want (each box should occupy the whole screen). above two media queries are working as expected but only the last media query is not working. Where is my mistake?

Answer 1

In your code media queries state:

@media  (min-width: 0px) and (max-width: 767px)
{
    .col-sm-12{
        width: 100%;
    }
}

However, it should be:

@media only screen and (min-width: 0px) and (max-width: 767px)
{
    .col-sm-12{
        width: 100%;
    }
}

The first approach is wrong, because you need to specify media you want to take width of (there are a lots of media queries other than screen).

Answer 2

Just add only max width

@media only screen and (max-width: 767px)
{
    .col-sm-12{
        width: 100%;
    }
}

Why media query is not working to the range between 0px and 767px?

Question

2 answers

solution1
0 2021-05-14 10:45:38

solution2
0 2021-05-14 14:14:24

Why media query is not working to the range between 0px and 767px?

Question

2 answers

solution1 0 2021-05-14 10:45:38

solution2 0 2021-05-14 14:14:24

solution1
0 2021-05-14 10:45:38

solution2
0 2021-05-14 14:14:24