Media Query Not Overwriting grid-template-column

Question

I have a form element thats displayed as grid in the main css

.mainDiv {
    .displayNone {
      display: none;
    }

    .generalInfoSection {
      .generalInfoTitle {
        font-family: Montserrat;
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 30px;
        color: #23282d;
        text-align: left;
      }

      .generalInfoFormSection {
        .generalInfoForm {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: auto auto auto 150px;
          grid-column-gap: 17px;
          grid-row-gap: 25px;
          margin-top: 16px;

and this is my media query

 @media (max-width: 768px) {
    .mainDiv {
      .displayNone {
        display: none;
      }

      .generalInfoSection {
        .generalInfoTitle {
          font-family: Montserrat;
          font-style: normal;
          font-weight: 600;
          font-size: 20px;
          line-height: 30px;
          color: #23282d;
          text-align: left;
        }

        .generalInfoFormSection {
          .generalInfoForm {
            grid-template-columns: 1fr 1fr;
            /* grid-template-rows: unset; */
            grid-column-gap: 17px;
            grid-row-gap: 25px;
            margin-top: 16px;

whenever I try to overwrite the grid-template-columns, to make it only 2 columns it stays at a 3 column grid. I checked the inspector and the style is being applied, but the output is still 3 columns rather than 2. This is using react with styled-components.

Answer 1

If you're having trouble getting a media query to overwrite the grid-template-columns property in your CSS, there could be a few reasons why this is happening. Here are a few things to check:

1. Specificity: Make sure that your media query has equal or greater specificity than the original grid-template-columns property. For example, if your original CSS rule looks like this:

.my-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

Then your media query should look something like this:

@media screen and (max-width: 768px) {
  .my-grid {
    grid-template-columns: 1fr;
  }
}

Note that the media query has the same selector as the original rule, so the specificity is equal. If you want to increase the specificity of the media query, you can add a parent selector, like this:

@media screen and (max-width: 768px) {
  .my-parent .my-grid {
    grid-template-columns: 1fr;
  }
}

2. Missing viewport meta tag: Make sure your HTML document has a viewport meta tag to ensure that the browser renders the page properly on different devices. Without this tag, media queries may not work as expected. Here's an example of a viewport meta tag:

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