Article preview component with HTML-CSS-JS

Solution retrospective
Hi! Here is my solution for this challenge: feedback on how I wrote the code is welcome, as well as advices to improve, thank you!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @placeteno
Hi @Ax-cd, your component looks good, both in mobile and desktop, well done!
I had a couple of suggestions that could improve your solution. For your
.card
class, using flexbox would make it easier to control the widths of the image and the content. You can add a gap and control the position of the elements much better. Also, instead of giving your .card a fixed width using percentages, try using<max-width>
with rem, it's more responsive and it stays the same regardless of screen size.Regarding the media queries, there's no need to have one for mobile and desktop views. Usually, you decide what approach to use first, mobile-first or desktop-first and, once you decide it, just add the corresponding media queries for the other screen sizes. For example, you could have started with desktop-first writing the code for that view and then add media query for the mobile view, tablet, etc.
I hope this helps!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord