Solution made with Flexbox and mobile first

Community feedback

• 

  Candela Bramucci•680

  @bramuccciPosted about 3 years ago

  Hi! For me your solution sees great with flex (maybe I would the media querie to a lower min value) but as you say, maybe it's more elegant with grid because the use of that extra div. I got this way: first, remove that div

  .cards{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  }
  .card__supervisor {
      grid-row: 1/3;
  }
  .card__calculator {
      grid-column: 2/3;
  }
  .card__karma {
      grid-column: 3/4;
      grid-row: 1/3;
  }
  

  Feel free to try it! Your solution is great and I hope this help you :D

  Marked as helpful

  1

  ---

  

  murilo•110

  @mlzziPosted about 3 years ago

  @Liltanie Great tip. I applied it and worked perfectly. I also changed the the media querie to change on 1024px instead of 1200px (I had made that way because of the squeeze behavior was not working well)

  On grid display it worked amazingly.

  Thanks for the help.

  1
• 

  seekinfox•560

  @seekinfoxPosted about 3 years ago

  I'll tell you what I did -> I'll keep the code minimum, since I'm writing this from mobile.

  This is mobile first approach

  <main> //.   column flex
     <div.container>
      <div.cards>  //column flex and  @media min width 1000px flex row
       .card1
        <div.middle-cards> //column flex
          .card2
          .card3
        </div>
       .card4
      </div>
     </div>
  </main>
  

  For a better idea you can check out my code for this challenge.

  Marked as helpful

  1