Design comparison
Solution retrospective
Hello guys, this is my very first CSS grid website, and there are lots of abnormalities. firstly, When I tried to inspect it in mobile view, the top section of my website was cut off, I tried the min-height property but it's still not working. Secondly if there are better ways to write the codes, please let me know. So, guys please I need your reviews, it will go a long way in helping me improve in CSS grid. Thanks, in anticipation.
Community feedback
- @VCaramesPosted about 2 years ago
Hey @Elektrokat, great job on this project!
Some suggestions to improve you code:
- For accessibility purposes, its better to use rem/em instead of px for your CSS property values.
- To make it easier to deal with CSS and have more control over your content, I suggest taking a look at CSS Resets.
It makes it easier to make changes and will ensure that everything will look the same regardless of browser used and don’t have to worry that the browser will be using its own styling.
One important thing about CSS Resets, is that there is no such thing as “one is better than the other.”
CSS Resets are customizable for your preference.
Here are few CSS Resets that you can look at and use to create your own CSS Reset or just copy and paste one that already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Happy Coding!
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello @Elektrokat, Congratulations on completing this challenge!
You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the
quote text
you can improve the accessibility there using<blockquote>
to indicate to screen readers that the content inside that paragraph is a quote.Your solution is not responsive and I think this is due somewidth
you've used somewhere instead ofmax-width
that's not allowing the cards to behave as flexbo/flexible.✌️ I hope this helps you and happy coding!
Marked as helpful0
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