Desktop & Mobile View Card Component made w/ CSS Grid Layout
Design comparison
Solution retrospective
Are there any HTML Elements in my code that do not adhere to the convention of using semantic HTML?
In regards to adapting the Figma/Sketch file to HTML/CSS code should I have adhered strictly to the exact pixel dimensions between certain elements? (i.e. the distance between the car logos and the headings). I eyeballed the distance because I have never been pressed to do an exact one to one from mockup to markup.
Community feedback
- @jamby4546Posted over 3 years ago
for me it was easier to use flexbox rather than CSS grids seeing as it is only in the X direction on desktop, and Y direction on mobile.
you can use margin: auto; for the container and usually it centers it.
In my opinion, your media breakpoint is at too small of a screensize. for me the design started looking squished at 1200px so i put one breakpoint there, and did a smaller breakpoint adjustment at 700ishpx. this video was helpful for me to learn making CSS grids responsive!
but overall good job at achieving the general layout of the card!
0
Please log in to post a comment
Log in with GitHub
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