Skip to content
OverviewSolutions
2
Comments
3
Emeke Nkadi
@EmekeN

All comments

  • hammercait•250
    @hammercaitSubmitted about 4 years ago

    I struggled with getting the boxes all lined up. I know there must be a better way that I am blanking on but any advice would be SO APPRECIATED! Thanks!

    edit: Updated 9/8- HUGE thanks to @EmekeN for the feedback and code help!

    Four card feature section

    1
    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
  • Emeke Nkadi•65
    @EmekeNPosted about 4 years ago

    The animation & JS for it looks impeccable!

    1
  • Emeke Nkadi•65
    @EmekeNPosted about 4 years ago

    Great job on recreating the design!

    To get a little bit closer to the design I would suggest these changes to your css.

    .box {
     padding: 20px 20px;
    background-color: #fff;
    box-shadow: 0px 17px 18px -5px rgba(194,190,194,1);
    min-height: 235px;  /* this will give the box a better display height */
    display: flex; /* this will allow the box's child elements to take up the full space of the box*/
    flex-direction: column; 
}

.box img {
    height: 40px;
    width: 40px;
    /*DO NOT USE FLOAT, this is really only for getting text to wrap around an image*/ 
    /* float: right; */
    /*Below will get the behavior you want for the images */
    margin-top: auto;
    align-self: flex-end; 
}
    0