Design comparison
Solution retrospective
I'm proud of making it look pretty much as required.
What challenges did you encounter, and how did you overcome them?One of the challenges I struggled the most with was creating the right sizes and spacing for all of the components. I overcame that by measuring everything in Figma.
What specific areas of your project would you like help with?I really need help with adjusting the code to be responsive with all devices. So far it just looks as it should on screens wider than width of the component.
Community feedback
- @Islandstone89Posted 8 months ago
HTML:
- Nothing to be said here - well done!
CSS:
-
Including a CSS Reset at the top is good practice.
-
Add around
1remofpaddingon thebody, so the card doesn't touch the edges on small screens. -
Instead of
0px, just write0. -
You don't need to write
.containerbefore every selector. -
On the
body, changeheighttomin-height- this way, the content will not get cut off if it grows beneath the viewport. -
Remove all widths and heights. In general, you should (almost) never set fixed sizes.
-
Add a
max-widthof around20remon the card, to prevent it from getting too wide on larger screens. -
font-sizemust never be in px. This is a big accessibility issue, as it prevents the font size from scaling with the user's default setting in the browser. Use rem instead. -
Paragraphs have a default value of
font-weight: 400, so there is no need to declare it. -
On the image, add
display: blockandmax-width: 100%- the max-width prevents it from overflowing its container.
Marked as helpful1@Zuja93Posted 8 months ago@Islandstone89 Thank You for the helpful comment and all these advices. I'll try to implement it in future.
1
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