Design comparison
SolutionDesign
Solution retrospective
How do I make the hr thinner?
Community feedback
- @denieldenPosted over 2 years ago
Hi Xhanti, good job! I took some time to look at your code and have some ideas for improving it:
- add
main
tag and wrap the card for improve the Accessibility - remove all
margin
fromcontainer
class because with flex they are superfluous - use flexbox to the body for center the card
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - add a little
transition
on the element with hover effect
Overall you did well 😉
Hope this help and happy coding!
1 - add
- @shameerkamaludeenPosted over 2 years ago
Hi @Singatha good job,
I would recommend looking at the stack overflow question for that, actually, the question is regarding the color of it but you can use border property to help your situation.
If you would like you can have a look at my solution to know how I did it.
Some additions
- Before submitting the solution you can use HTML validation and CSS validation to find any error in your HTML and CSS file.
- Read Accessibility on MDN to know the importance of it.
- The card is having some issue in making it centre, you can refer to my solution or check For div to extend full height
Enjoy coding...
1 - @saakarxPosted over 2 years ago
Hello Xhanti Singatha, good job on the solution and great feedback above.
- Read about semantic. Semantic elements lead to more consistent code, they are easier to read and improve accessibility.
- And for making the <hr> thinner, use
border-width: 1px 0 0;
on the hr tag to make it thinner.
Good luck with that, have fun coding! 💪
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