Html Question posted in
Some basic documentation can be found here.

Html – Can someone help me make this card grid responsive?

I recently started using HTML & CSS for my workplace.

Now i ran into my first big problem: Making my Grid card elements responsive.

I have four card elements in my column each with text which gains opacity when you hover over the card. Now if someone views these cards on a tablet it should show only 3 cards in a column (for phone 2 cards), aswell as resize the text.
I tried using my normal media Querys which didn’t work. They won’t jump into the next column when i resize my page.

I tried searching for examples on google but could’nt find anything helpful. So i hope some of you could help me out.

Kindest regards 🙂

My Code:

figure {
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin: 10px;
}

figure>* {
  grid-area: 1/1;
  transition: .4s;
}

figure img {
  width: 100%;
  height: auto;
}

figure:hover figcaption {
  --_i: 0%;
  background-color: #ed161f;
}

figure:hover img {
  transform: scale(1.2);
}

@supports not (-webkit-mask-clip: text) {
  figure figcaption {
    -webkit-mask: none;
    color: #fff;
  }
}

.hover-content {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.4s;
  background-color: #ed161f;
}

figure:hover .hover-content {
  opacity: 1;
}

.hover-content p {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  margin: 0;
  padding-top: 20px;
}

.card-grid {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-flow: column;
  place-content: center;
  background: #425a52;
}

@media only screen and (max-width: 1000px) {
              .card-grid {
                    display: grid;
                    grid-template-columns: auto auto auto;
              }
        }

        @media only screen and (max-width: 800px) {
              .card-grid {
                    display: grid;
                    grid-template-columns: auto auto;
              }
        }
<div class="card-grid">
  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          >Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>
</div>
Tags:

2

Answers


  1. 0

    First, add media queries to your .card-grid CSS class to adjust the number of columns based on the screen width. You can also adjust the text size within each card for different screen sizes.

    figure {
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  margin: 10px;
}

figure>* {
  grid-area: 1/1;
  transition: .4s;
}

figure img {
  width: 100%;
  height: auto;
}

figure:hover figcaption {
  --_i: 0%;
  background-color: #ed161f;
}

figure:hover img {
  transform: scale(1.2);
}

@supports not (-webkit-mask-clip: text) {
  figure figcaption {
    -webkit-mask: none;
    color: #fff;
  }
}

.hover-content {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.4s;
  background-color: #ed161f;
}

figure:hover .hover-content {
  opacity: 1;
}

.hover-content p {
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25rem;
  margin: 0;
  padding-top: 20px;
}

.card-grid {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-auto-flow: column;
  place-content: center;
  background: #425a52;
}
    <div class="card-grid">
  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          >Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="/img/hans_jorg.jpg" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          ... ist <br> seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>
</div>
    Login or Signup to reply.
  2. 0

    Use CSS grid-template-columns set at repeat(auto-fit, 200px); in order to wrap your columns.
    Make sure to remove grid-auto-flow: column;

    * { margin: 0; box-sizing: border-box; }

.card-grid {
  min-height: 100dvh; /* use rather dvh unit */
  display: grid;
  gap: 10px; /* instead of margin on figures */
  grid-template-columns: repeat(auto-fit, 140px);
  /* grid-auto-flow: column; /* Nope */
  place-content: center;
  background: #425a52;

  & figure {
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
    position: relative;

    & >* {
      grid-area: 1/1;
      transition: .4s;
    }

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    &:hover figcaption {
      --_i: 0%;
      background-color: #ed161f;
    }

    &:hover .hover-content {
      opacity: 1;
    }

    &:hover img {
      transform: scale(1.2);
    }
  }

  .hover-content {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    opacity: 0;
    transition: opacity 0.4s;
    background-color: #ed161f;


    & p {
      color: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 1.25rem;
      margin: 0;
      padding-top: 20px;
    }
  }
}

@supports not (-webkit-mask-clip: text) {
  figure figcaption {
    -webkit-mask: none;
    color: #fff;
  }
}
    <div class="card-grid">
  <figure>
    <img src="https://picsum.photos/id/100/300/300" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          Sseit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          >Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/id/101/300/300" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          Seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/id/102/300/300" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          Seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/id/103/300/300" alt="Portrait">
    <figcaption>
      <div class="hover-content">
        <p>
          Seit 1997 Gemeindevertreter seit 1999 Stadtrat 2004-2014 Vizebürgermeister seit 2014 Bürgermeister Bundesvorstand Österr. Gemeindebund, Landes­vorstand Salzburger Gemeinde­verband, Landesvorsitzender Gemeindevertreterverband
        </p>
        <p>
          Kompetenzbereiche<br> Finanzen, Bau, Raumordnung, Soziales, Wirtschaft, Stadtmarketing
        </p>
      </div>
    </figcaption>
  </figure>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search