Four card feature section

Community feedback

• 

  Emeke Nkadi•65

  @EmekeNPosted about 4 years ago

  There is an easier way to get your boxes lined up! You don't need position: relative, position: absolute or any transform at all to get the boxes layout correct.

  I would set up my HTML like this

  <div class="boxes">
    <div class="cards supervisor/>
     <div class="stack>
        <div class="cards team-builder/>
        <div class="cards karma/>
     </div>
    <div class="cards calculator/>
  </div>
  

  For the css, all you need is to set the correct alignment/justification and margins on the cards.

  .boxes {
      display: flex;
      flex-direction: row;
      margin-top: 30px;
  }
  
  .cards {
      /* position: absolute; */
      width: 375px;
      height: 275px;
      background-color: white;
      border-radius: 10px;
      /* display: flex; */
      /* flex-direction: column; */
      box-shadow: 0px 2px 10px 0px var(--grey-blue);
  }
  
  .stack {
    display:flex;
    flex-direction: column;
  }
  
  .supervisor {
      border-top: 5px solid var(--cyan);
      /* top: 155px; */
      align-self: center;
      margin-right: 15px;
  }
  
  .team-builder {
      border-top: 4px solid var(--red);
      /* left: 50%; */
      /* transform: translateX(-50%); */
      margin-bottom: 15px;
  }
  
  .calculator {
      border-top: 5px solid var(--cyan);
      /* top: 155px; */
      align-self: center;
      margin-left: 15px;
  }
  
  /* How to change layout on mobile */
  @media screen and (max-width: 600px) {
    .boxes {
       flex-direction: column;
    }
    .supervisor,
    .karma,
    .team-builder,
    .calculator {
       margin: 0 0 15px 0;
    }
  
  } 
  

  Good work! Hope this helps!

  0

  ---

  

  hammercait•250

  @hammercaitPosted about 4 years ago

  @EmekeN you are my HERO! Thank you so much!! I will definitely rework my code to follow your suggestions. Thank you thank you!

  0

  

  Emeke Nkadi•65

  @EmekeNPosted about 4 years ago

  @hammercait Yay! Glad I could help.

  0