Four card feature section challenge

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. Just a few things that you need to fix.

  • The text in the footer is not in the center of the page
  • Add more space between the footer and the lower card
  • When the screen size goes to 375px, the cards seems to overflow.

  Reduce the width of the cards for screen size of 375px.

  0

  ---

  

  w0daz•220

  @w0dazPosted over 1 year ago

  @hitmorecode

  thank you for your feedback.

  i've effected the changes you proposed. kindly take another look and see if it is proper now.

  best regards,

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @w0daz looks good :-) You can add a bit of margin-bottom to the footer just to lift it a bit. Now the footer is at the edge of the page in the bottom.

  I'll give you a bonus see if you can fix it. As you can see the top border of the cards has a radius to the inside and it's not straight like the design. There is a hack to fix this, give it a try and if you can't solve it let me know. I'll show you how to fix it.

  Marked as helpful

  0

  

  w0daz•220

  @w0dazPosted over 1 year ago

  @hitmorecode

  i've added some margin to the bottom of the footer. but i couldn't achieve the border-top effect. please how do i do this?

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @w0daz what you can do is add an empty div, give it a height(4px) and a width(equals the width of the card) and a background color according with the card

  ### add class card-bar on all cards.
  <div class="boxOne center card-bar">
  <div class="top-bar supervision-bar">###add this to all cards and only change the second class name for each card. You need this to individual change the background color. This div must be empty</div>
  <h1>Supervisor</h1>
  <p>Monitors activity to identify project roadblocks</p>
  <img src="images/icon-supervisor.svg" alt="">
  </div>
  

  .card-bar {
  position: relative;
  }
  
  .top-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: inherit;
  }
  
  .supervision-bar {
  background-color: hsl(180, 62%, 55%);
  }
  

  It might be a bit complicated, but it works

  Marked as helpful

  0

  

  w0daz•220

  @w0dazPosted over 1 year ago

  @hitmorecode

  thanks! i've tried this. please see the result. question: am i supposed to remove the border-top styles on all the boxes after adding the divs and styling them? because when i do so it makes the top of the cards look like a regular box with no border-radius.

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @w0daz yes you can remove the border-top on all cards and add a border-radius on the empty div

  .card-bar {border-radius: 10px 10px 0 0}

  Marked as helpful

  0

  

  w0daz•220

  @w0dazPosted over 1 year ago

  @hitmorecode

  that worked like a charm. thanks so much!

  0

  

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  @w0daz Any time :-)

  1