Responsive Article preview component with CSS Flexbox

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted about 2 years ago

  Hi Ssembatya,

  Congratulations for your submission! And for crossing the JavaScript bridge too.

  I just want to share some of my css personal view regarding your solution.

  For the breakpoints, I think it's better to use max-width: 768px instead of max-width: 425px. Because when the browser width is close to 425px, the height of <div class="card__details"></div> is taller than the card__image, which makes the white spaces above and below it.

  Try to give the <main> element padding-left and padding-right to give a nice breathing space for <div class="card"> element.

  Give your <div class="card"> element max-width that is less than browser width so it won't get zoomed out when the browser width is less than the card's max-width.

  Feel free to take a look at my solution here to see how I've done it. Please note that it's far from perfect though.

  Hope this helps.

  Best regards

  Marked as helpful

  0

  ---

  

  Ssembatya Dennis Duncan•260

  @ssembatya-dennisPosted about 2 years ago

  @amalkarim Thank you very much for this wonderful feedback, and it definitely helped.

  0