Issue with mobile responsive css not working

Question

Can anyone help me with this, I have a css grid defined and it works above 768px when min-width is called but when I scale below that it keeps the same format and the media tag doesn't seem to come into effect. If I change min-width to max-width then i get the correct formatting for below 768px but don't get the correct formatting for above 768px

HTML

 <html>
        <head>
            <title>Responsive Design with CSS Media Queries</title>
            <link rel='stylesheet' href='style.css'/>
        </head>
        <body>
            <div class="grid-container">
                <div class="grid-item-1"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-2"></div>
                <div class="grid-item-3"></div>
                <div class="grid-item-4"></div>
                <div class="grid-item-5"></div>
                <div class="grid-item-6"></div>
            </div>
        </body>
    </html>

CSS

    *{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-weight: lighter;
}

@media (min-width: 769px) and (max-width: 1920px){
    .grid-container{
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 3px 3px;
    }
    
    .grid-item-1{
        height: 100px;
        background-color: #F5C6D6;
        grid-column: 1/5;
    }
    .grid-item-2{
        height: 100px;
        background-color: #EE2E84;
    }
    .grid-item-3{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 1/3;
    }
    .grid-item-4{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 3/5;
    }
    .grid-item-5{
        height: 100px;
        background-color: #8DC63F;
        grid-column: 1/4;
    }
    .grid-item-6{
        height: 100px;
        background-color: #E76E34;
    }
}

@media only screen and (max-width: 768px){
    .grid-container{
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 3px 3px;
    }
    .grid-item-1{
        height: 100px;
        background-color: #F5C6D6;
        grid-column: 1/2;
    }
    .grid-item-2{
        height: 100px;
        background-color: #EE2E84;
        grid-column: 1/2;
    }
    .grid-item-3{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 1/2;
    }
    .grid-item-4{
        height: 100px;
        background-color: #85CFD8;
        grid-column: 1/2;
    }
    .grid-item-5{
        height: 100px;
        background-color: #8DC63F;
        grid-column: 1/2;
    }
    .grid-item-6{
        height: 100px;
        background-color: #E76E34;
        grid-column: 1/2;
    }
}

score 2 · Accepted Answer · answered Jun 27 '20 at 18:15

2

I guess this problem is because you haven't provided the meta tag -

Try including -

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

Include this in head tag.

answered Jun 27 '20 at 18:15

Gauri Shankar Gupta

139
5

Issue with mobile responsive css not working

1 Answers1