@amalkarim
Posted
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
@ssembatya-dennis
Posted
@amalkarim Thank you very much for this wonderful feedback, and it definitely helped.
