Search code examples
media-queries

What is overriding a media query?

I am practicing with css-grid and media queries. When I add the media query for max-width 768px nothing happens when I shrink the screen to that size and I still see the 4 columns instead of the 2 I am trying to apply.

I am using Visual Studio Code and the live server. I already tried opening the html directly in Finder (I am using mac os), i have refreshed the page and still have the same issue.

Something is overriding that media query when I have a screen size under 768px and when I inspect the file I see these messages below. How can I solve this or what am I doing wrong here?

Very thankful for any help!

enter image description here

enter image description here

body {
  background: green;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 1rem;
}

@media (max-width: 768px) {
  .grid {
    display: grid;
    grid-template-columns: repeat (2, auto);
  }
}
<body>
    <div class="grid">
        <div class="item">
            <h3>Heading 1</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>
        <div class="item">
            <h3>Heading 2</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>
        <div class="item">
            <h3>Heading 3</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>
        <div class="item">
            <h3>Heading X</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem debitis nesciunt eum accusamus corrupti voluptates officiis. Molestiae deleniti pariatur ipsum rerum facilis dicta fugiat quibusdam, nulla quo suscipit, consectetur ratione.</p>
        </div>

    </div>
</body>

Solution

  • There is a space between the word repeat and the opening bracket. Remove that and all should be OK.

    The yellow warning triangle shows that something was wrong with that line.