flexbox sass

Community feedback

• 

  darryncodes•6,390

  @darryncodesPosted about 3 years ago

  Hi Dalenza,

  Really nice work, well done.

  You could clear up your accessibility report by making this <div class="wrapper"> a <main> tag. And consider using one <h1> ( I don't think I did tbf).

  Marked as helpful

  0

  ---

  

  Dalenza•65

  @DalenzaPosted about 3 years ago

  @darryncodes thanks :)

  0
• 

  dania•530

  @adimidaniaPosted about 3 years ago

  Hey Dalenza! Congratulations on completing this challenge! My suggestions :

  • I think you need to add some space between the lines in the paragraphs, you can achieve that by using the property line-height, try to add this line-height:27px;
  • For the buttons hovering, as shown in the active-state-preview.jpg, you only need to make the background-color transparent (and the button needs to have a white border)
  • In the mobile version, we can't see the card properly (It's overflowing), because you've set the height of the body to 100vh. One of the ways to fix this (according to your solution), is to set the height of the body to height:max-content for the mobile version (P.S : add some margin (top & bottom) to the card to make it look better)

  Keep coding!!

  Marked as helpful

  0

  ---

  

  Dalenza•65

  @DalenzaPosted about 3 years ago

  @adimidania thanks for the feedback. for the third suggestion, my solution to the overflow was to set "align-items:safe center" on the wrapper so when the content of the wrapper overflow "align-items" will have a value of "start" automatically. https://developer.mozilla.org/en-US/docs/Web/CSS/align-items This solution works perfectly on the responsive mode of Mozilla. but as you said, for mobile browsers it seems that they ignore it.

  1