3-column preview card component solution using Flexbox and Grid

Community feedback

• 

  suhayb jirde•1,050

  @suhaybjirdePosted almost 2 years ago

  Well done but i have some tips that may help you

  1. First you set body { height:100vh} for the desktop version and it's working then It comes to the mobile vertion then the content started overflowing to fix this issue you just write body { height: auto; don't specify a height }

  1
• 

  Kyrie•70

  @KyrieeWenPosted almost 2 years ago

  Hey Okute, great work!

  Good: 1. Define variables for primary colours 2. Descriptive comment to explain steps 3. Descriptive class name for 3 components

  For the question you asked why need to set it to be 145 vh to not cut off the screen. it is because 100 vh means 100% of the current viewport height, so you set that body is 100vh tall including its padding and margin.. but the issue is on body's child, sedan, suv and luxury that you set padding 2.5rem but no height to be defined.. so overall body itself is 100vh with margin or padding, but it cannot control the sum of child's height and padding still be 100vh.. is that clear?

  Also you dont need to use !important to override border radius that you set in 500px breakpoint, it still can be applied when screen size is <= 500px

  Hope my feedback is helpful, keep going!

  1