0

Estoy realizando un curso que incluye CSS responsive y al momento de realizar una tarea me solicita un Home con tarjetas, utilizando grid y adaptarlo con media query para tablet y celular. Lo que pasa es que al momento de implementar las media query en la pagina web no me las detecta. La idea es que al llegar a un max-widht de 768 se acomoden en dos columnas de dos tarjetas y al llegar al max-widht de 480 se haga una sola columna con las cuatro tarjetas una debajo de la otra

.card-container {
  height: 100vh;
  width: 100%;
  background-color: #ffeedd;
  justify-content: space-between;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.card-container figure {
  height: 400px;
  width: 300px;
  border: 3px solid black;
  border-radius: 10px;
  margin: 50px 30px;
}
.card-container figure img {
  height: 100px;
  width: 250px;
  margin: 10px 20px 40px 20px;
}
.card-container h2 {
  font-size: 2rem;
  font-family: var(--font-family);
  text-align: center;
}
.card-container p {
  font-size: 1rem;
  font-family: var(--font-family);
  text-align: justify;
}
@media screen and (max-widht: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 2fr);
  }
}
@media screen and (max-widht: 480px) {
  .card-container {
    grid-template-columns: repeat(1, 1fr);
  }
}
<body>
    <section class="card-container">
        <figure>
            <img src="/images/est-cont.jpg" alt="contabilidad">
            <h2>EL ESTUDIO</h2>
            <p>Estudio Contable SERVACO, brinda un asesoramiento integral a Unipersonales y PYMES en toda la etapa
                de su
                vida comercial.</p>
        </figure>
        <figure>
            <img src="/images/gest-aut.jpg" alt="gestoria">
            <h2>GESTORÍA AUTOMOTOR</h2>
            <p>Somos una prestigiosa gestoría automotor formada por un excelente equipo humano que abarca una amplia
                lista de servicios para brindarle.</p>
        </figure>
        <figure>
            <img src="/images/seg.jpg" alt="seguros">
            <h2>SEGUROS</h2>
            <p>Encontrarás una amplia variedad en seguros para personas y empresas: seguros de vida, pólizas de
                hogar, auto o moto y más</p>
        </figure>
        <figure>
            <img src="/images/novedades.jpg" alt="seguros">
            <h2>NOVEDADES</h2>
            <p>Te informamos cada día de las novedades impositivas a nivela nacional, provincial y municipal</p>
        </figure>
    </section>
</body>

1 respuesta 1

1

Tenes mal escrita la palabra width, es th y pusiste ht

@media screen and (max-width: 768px) {
  .card-container {
    grid-template-columns: repeat(2, 2fr);
  }
}
@media screen and (max-width: 480px) {
  .card-container {
    grid-template-columns: repeat(1, 1fr);
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.