Submitted almost 2 years ago
Single price grid component built with HTML and CSS
@rafdidact
Design comparison
SolutionDesign
Solution retrospective
You think you can find inefficient code in my repository? let me know!
Community feedback
- @vanzasetiaPosted almost 2 years ago
Hi, Adán!
Here are some suggestions for improvements.
- Replace the second and the third
<h1>with<h2>. There should not be more than oneh1on a page. Many<h1>elements mean many titles which can confuse the users, especially the screen reader users. <h2>30-day, hassle-free money back guarantee</h2>should be<p>. It is not a heading. You can use wrap the text with<strong>tag if you want.- There should not be text in
<span>and<div>alone. Wrap the text with a meaningful element like a paragraph element. - Remove
font-size: 1emfrom the<body>styling. It is already the default styling. - Adjust the media query breakpoint.
1440pxfor grid layout is too late. The card should have a grid layout as soon as there is enough space. - Never limit the height of the
<body>. It will not allow the users to scroll the page when the page content needs more height. So, usemin-heightinstead. - Set
min-height: 100vhto the<body>element as the reset styling. This way, it always fills the entire page and allows it to grow if ever needed (responsive).
I hope this helps. Happy new year!
Marked as helpful0@rafdidactPosted almost 2 years agoThank you, Vanza! I already applied your suggestions.
Happy new year for you as well.
0 - Replace the second and the third
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