Responsive layout cards are not working on mobile

Question

Description

Whilst creating a webpage, everything was working on Chrome DevTools as expected, until I tried the mobile version. Why is that happening? Never faced such issue.

Steps to Reproduce

This is how it is on the desktop version.

After reducing the width:

Which is expected. It's when I activate the mobile version that it's suddenly not working:

Even with the .cards class using flex + flex-wrap + flex-direction or using grid + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); it does not work for mobile.

Environment

The code I am using is as follows:

const data = [
  {
    CODIGO: "a1",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a2",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a3",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a4",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a5",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
  {
    CODIGO: "a6",
    NOME: "TESTING",
    CLASSE: "ALUNO",
  },
];

const groupByKey = (list, key, { omitKey = false }) =>
  list.reduce((hash, { [key]: value, ...rest }) => {
    const item = omitKey ? rest : { [key]: value, ...rest };
    const group = hash[value] || [];
    return { ...hash, [value]: [...group, item] };
  }, {});

const result = groupByKey(data, "CLASSE", { omitKey: true });
const ALUNO = result.ALUNO;
const PROFESSOR = result.PROFESSOR;
const MIDIA = result.MIDIA;
const PASTOR = result.PASTOR;

document.addEventListener("DOMContentLoaded", function () {
  const listElements = {
    alunoList: document.getElementById("alunos"),
    professorList: document.getElementById("professores"),
    midiaList: document.getElementById("midia"),
    pastorList: document.getElementById("pastores"),
  };

  const createCard = (person, aluno = false) => {
    const card = document.createElement("div");
    card.classList.add("card");

    const cardImage = document.createElement("div");
    cardImage.classList.add("card__image");
    const image = new Image();
    image.src = `assets/img/${person.CODIGO}i.webp`;
    cardImage.appendChild(image);

    const cardContent = document.createElement("div");
    cardContent.classList.add("card__content");
    const cardTitle = document.createElement("div");
    cardTitle.classList.add("card__title");
    cardTitle.innerHTML = person.NOME;
    const cardText = document.createElement("p");
    cardText.classList.add("card__text");
    const cardLink = document.createElement("a");
    cardLink.setAttribute("target", "_blank");
    cardLink.setAttribute("href", `${person.CODIGO}.html`);
    const cardButton = document.createElement("button");
    cardButton.classList.add("btn");
    cardButton.classList.add("btn--block");
    cardButton.innerHTML = "Mais detalhes ➜";
    cardLink.appendChild(cardButton);
    cardContent.appendChild(cardTitle);
    cardContent.appendChild(cardText);
    cardContent.appendChild(cardLink);

    card.appendChild(cardImage);
    card.appendChild(cardContent);

    const li = document.createElement("li");
    li.classList.add("cards__item");
    li.appendChild(card);
    return li;
  };

  const addCardsToList = (personList, person, aluno = false) => {
    listElements[personList].appendChild(createCard(person, aluno));
  };

  ALUNO.forEach((person) =>
    addCardsToList("alunoList", person, (aluno = true))
  );
});

:root {
  --gray-darker: #444444;
  --gray-dark: #696969;
  --gray: #999999;
  --gray-light: #cccccc;
  --gray-lighter: #ececec;
  --gray-lightest: lighten(--gray-lighter, 4%);
  text-decoration: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  scroll-behavior: smooth;
}
a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
}
section {
  min-height: 100vh;
  width: 100%;
}
html {
  background-color: #f0f0f0;
}
body {
  color: var(--gray);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  padding: 1rem;
}
h1 {
  font-size: 5rem;
  padding: 3rem;
}
.cards {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem;
}
.cards .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0.25rem;
  max-width: 300px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
}
.cards .card:hover .card__image {
  filter: contrast(100%);
}
.cards .card__content {
  padding: 1rem;
}
.cards .card__content .btn {
  background-color: #fff;
  border: 1px solid var(--gray-light);
  border-radius: 1rem;
  color: var(--gray-dark);
  padding: 0.5rem;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
}
.cards .card__content .btn:hover {
  background-color: #c00;
  color: #fff;
}
.cards .card__content .btn--block {
  width: 100%;
  height: 48px;
  font-size: 1.2rem;
}
.cards .card__image {
  filter: contrast(70%);
  overflow: hidden;
  position: relative;
  transition: filter 0.5s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  height: 400px;
}
.cards .card__image img {
  width: 100%;
  max-height: 400px;
  -o-object-fit: contain;
  object-fit: contain;
}
.cards .card__title {
  color: var(--gray-dark);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.cards .card__text {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
@media screen and (max-width: 600px) {
  h1 {
    font-size: 3rem;
    padding: 1.5rem;
  }
  .cards .card {
    margin-bottom: 1rem;
  }
  .cards .card__image {
    max-height: 200px;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
    <link rel="stylesheet" href="assets/style.css">
    <script defer src="assets/script.js"></script>

  </head>
  <body>
    <section>
      <h1>Alunos</h1>
      <ul class="cards" id="alunos"></ul>
    </section>
  </body>
</html>

As this never happened to me, I don't even know where to begin. I know that it's happening due to the css, but any tips would be awesome.

Thanks!

Answer 1

Try Adding

<meta name="viewport" content="width=device-width, initial-scale=1"> into your head tag.