1

I have three cards in the middle of my page:

      ------   ------   ------      
     |      | |      | |      |
     |      | |      | |      |
     |      | |      | |      |
      ------   ------   ------

I have set a 15% margin on the left and right of the cards container.

However, when I resize the screen, the cards get smaller instead of the margin getting smaller and waiting until there is only a margin of e.g. 10px left, then it should shrink the cards.

Here's my code:

.section{
    min-height: 55vh;
    padding: 0 15%;
    display: flex;
    align-items: center;
}
.cards{
    margin: 0 auto;
    width: 90%;
    height: 47vh;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: 2rem;
    max-width: 133rem;
}
.card{
    display: grid;
    grid-template-rows: repeat(5,1fr);
    width: 100%;
    height: 100%;
}

<div class="section">

  <div class="cards">

    <div class="card">

    </div>

  </div>

</div>

How can I get this to work without using multiple media queries? Thanks!

Matt
  • 105
  • 7

1 Answers1

0

You could use media queries in css to do this. Something like this could work:

@media only screen and (max-width: 900px) {
 .section{
  min-height: 55vh;
  padding: 0 5%;
  display: flex;
  align-items: center;
 }
}

This will change your css class based on the width, basically once it hits 900px or less, it will change your css to the new declared class. You could have multiple of these setup that are based on width. https://www.w3schools.com/css/css_rwd_mediaqueries.asp

PurpSchurp
  • 581
  • 5
  • 14
  • thanks very much, however, is there a way to do with without multiple media queries? – Matt Sep 13 '20 at 19:10
  • You could possibly use a resize function through javascript, and change the class depending on the width, but honestly media queries are the better solution – PurpSchurp Sep 13 '20 at 19:26
  • This is more than likely your best bet as it is best practive, don't forget to mark this as the answer! :) – PurpSchurp Sep 27 '20 at 07:00