CSS grid is not turning into 5 columns with media queries

Question

I have a react component and I am using styled-components in it. Please check the HTML version below at the bottom of this post. In this component, ListingContainer has 6 columns initially. I want to make it 5 columns when the width of the browser gets to 1080px . I am using grid-template-columns: repeat(5, 1fr); but when I inspect it in chrome browser it shows 5 columns in css code but on display/browser it still shows 6 columns. How can I fix this and make it work?

Here is my react component.

import "./styles.css";
import styled from 'styled-components';
import { Link } from 'react-router-dom';

const ListingWrapper = styled.div`
    max-width: 1366px;
    font-family: Roboto;
`;

const ListingContainer = styled.div`
    box-sizing: border-box;
    max-width: 1196px;
    margin: 10px auto 0;
  padding: 40px 100px;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: repeat(6, 1fr); // here columns are 6.
    grid-template-rows: 1fr auto;
    grid-gap: 10px;
    @media (max-width: 1080px) {
    grid-template-columns: repeat(5, 1fr); // Here I am resetting columns to 5 but it is not working.
    }

    @media (max-width: 840px) {
    padding: 40px 14px;
    }
`;

const ProductContainer = styled(Link)`
    display: block;
    width: 140px;
    text-decoration: none;
    border: 1px solid #D8D8D8;
`;

const ImageFigure = styled.figure`
    margin: 0;
  padding: 0;
`;

const ProductImage = styled.img`
    width: 100%;
`;

const Caption = styled.figcaption`
    padding: 10px;
`;

const ProductTitle = styled.span`
    font-weight: 500;
    font-size: 12px;
    color: #4D4D4D;
`;

const ProductPrice = styled.span`
    display: block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #E01A1A;
`;

const App = () => {
    return (
        <ListingWrapper>
            <ListingContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
                <ProductContainer to=''>
                    <ImageFigure>
                        <ProductImage src='https://via.placeholder.com/150' alt='' />
                        <Caption>
                            <ProductTitle>Lorem ipsum dolor sit amet</ProductTitle>
                            <ProductPrice>$12,00</ProductPrice>
                        </Caption>
                    </ImageFigure>
                </ProductContainer>
            </ListingContainer>
        </ListingWrapper>
    );
}

export default App;

Here is codesandbox link.

https://codesandbox.io/s/hopeful-colden-tmjr6?file=/src/App.js:0-3033

UPDATE

Here is the html version of this code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      .listingWrapper {
        max-width: 1366px;
        font-family: Roboto;
      }

      .listingContainer {
        box-sizing: border-box;
        max-width: 1196px;
        margin: 10px auto 0;
        padding: 40px 100px;
        background-color: #ffffff;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr auto;
        grid-gap: 10px;
        @media (max-width: 1080px) {
          grid-template-columns: repeat(5, 1fr);
        }

        @media (max-width: 840px) {
          padding: 40px 14px;
        }
      }

      .productContainer {
        display: block;
        width: 140px;
        text-decoration: none;
        border: 1px solid #d8d8d8;
      }

      figure {
        margin: 0;
        padding: 0;
      }

      img {
        width: 100%;
      }

      figcaption {
        padding: 10px;
      }

      .productTitle {
        font-weight: 500;
        font-size: 12px;
        color: #4d4d4d;
      }

      .productPrice {
        display: block;
        margin-top: 10px;
        font-weight: 700;
        font-size: 14px;
        color: #e01a1a;
      }
    </style>
  </head>
  <body>
    <div class="listingWrapper">
      <div class="listingContainer">
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
        <a class="productContainer" href="">
          <figure>
            <img src="https://via.placeholder.com/150" alt="" />
            <figcaption>
              <span class="productTitle">Lorem ipsum dolor sit amet</span>
              <span class="productPrice">$12,00</span>
            </figcaption>
          </figure>
        </a>
      </div>
    </div>
  </body>
</html>

Here is the sandbox link

https://codesandbox.io/s/magical-grass-vfvqz?file=/index.html:0-3602

Answer 1

Media query should not append inside a single class. You should put it outside the classes selector but inside the style tag and wrap your responsive style inside the class selector for particular media query width

Try to replace your style with the following:

 <style> @media (max-width: 1080px) { .listingContainer { grid-template-columns: repeat(5, 1fr) !important; } } @media (max-width: 840px) { .listingContainer { padding: 40px 14px !important; } } .listingWrapper { max-width: 1366px; font-family: Roboto; } .listingContainer { box-sizing: border-box; max-width: 1196px; margin: 10px auto 0; padding: 40px 100px; background-color: #ffffff; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr auto; grid-gap: 10px; } .productContainer { display: block; width: 140px; text-decoration: none; border: 1px solid #d8d8d8; } figure { margin: 0; padding: 0; } img { width: 100%; } figcaption { padding: 10px; } .productTitle { font-weight: 500; font-size: 12px; color: #4d4d4d; } .productPrice { display: block; margin-top: 10px; font-weight: 700; font-size: 14px; color: #e01a1a; } </style>