Grid Columns Not behaving as expected

I’m having some trouble getting grid columns to work as expected. I tried this out in both Chrome and Firefox with the same results. Basically, the layout doesn’t seem to be changing at the expected breakpoints. Adding “overflow-x: hidden” to the body improved things slightly, but it’s not where I want it to be. What’s odd is that when I test it using the device/mobile testing in Chrome Dev Tools, it behaves exactly as expected. Code follows:



<div class="container">
  <div *ngFor="let band of bands" class="band-card">
    <h3><strong>{{ }}</strong></h3>
    <img src="{{ band.pictureUrl }}">
    <p><strong>What's their deal?</strong></p>
    <p>{{ band.summary }}</p>
    <p><strong>Signature Songs</strong></p>
    <p>{{ band.signatureSongs }}</p>
    <p>{{ band.subgenres }}</p>
    <p>{{ }}</p>

and the CSS:

html, body {
  background-color: #c2d6d6;
  box-sizing: border-box;
  font-family: 'Hind', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;

.container {
  display: grid;
  grid-template-columns: repeat(4, 20rem);
  grid-gap: 2rem;
  margin: 3rem;
} {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;

img {
  max-width: 80%;

p {
  margin-bottom: 0 !important;
  word-wrap: break-word;

@media screen and (max-width: 1000px) {
  .container {
    grid-template-columns: repeat(3, 20rem);
    margin: 2rem;

@media screen and (max-width: 700px) {
  .container {
    grid-template-columns: repeat(2, 20rem);
    grid-gap: 1rem;

@media screen and (max-width: 400px) {
  .container {
    grid-template-columns: 20rem;

Second time this week I’ve rubber-ducked while posting on here: In case anybody else runs into this issue, it was because the screen widths in the media queries were declared in pixels. Changing these to rems fixed the issue.