Design comparison
Solution retrospective
I AM newborn with code. IF you have feedback plese tell me. Thank you
Community feedback
- @SecreSwalowtailPosted almost 2 years ago
Hello Kazuha ,
I have some tips that may help you :
-
Avoid using grid for the body. You can use flex to position the main card. Grid is more used when you have complex designs.
-
Avoid using fixed height/width. You can use min-height to give the card a minimum height that will always stay and a max-width to stop it from expanding more than that The content overflows to the left for this reason
-
Try and give the texts in the card a text-align to center them
-
A best practice is to only type CSS rules that you need If you type rules that at first doesn't do anything , later it may conflict with other CSS rules
-
You can look into a reset stylesheet. It removes a lot of headache from images, content not having the right padding/margin etc.
Resources :
- https://www.joshwcomeau.com/css/custom-css-reset/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.w3schools.com/cssref/pr_dim_min-height.php
- https://www.w3schools.com/cssref/pr_dim_min-width.php
Keep up the work , this is very nice.
0 -
- @obengkennethPosted almost 2 years ago
Please center the content underneath the image using text-align: center property in css and add an alt tag to your image for accessibility.
0
Please log in to post a comment
Log in with GitHubJoin 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