Design comparison
SolutionDesign
Solution retrospective
I have done this project with flexbox, anyone done it with css grid?
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Betelhem, congratulations for your new solution!
You've missed the color for the background, in this case is
background-color: #F2F2F2
and add it to the body.Add
min-height: 100vh
instead ofmin-height: 800px
to have the proper alignment and make the body have the size of 100% of the vviewport height size:main { font-family: var(--font-family-lexend), sans-serif; font-weight: var(--font-weight-normal); font-size: var(--font-size); width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
✌️ I hope this helps you and happy coding!
Marked as helpful1 - @PhoenixDev22Posted about 2 years ago
Hello Betelhem,
Congratulation on completing another frontend mentor. I have some suggestions regarding your solution:
- About
<h1>
it is recommended not to have more than one h1 on the page. Multiple<h1>
tags make using screen readers more difficult, decreasing your site’s accessibility. In this challenge , as it’s not a whole page, you can have<h1>
visually hidden withsr-only
. Then you can swap those<h1>
with<h2>
- In my opinion, the images are much likely to be decorative. For any decorative images, each img tag should have empty
alt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images.
- Adding
rel="noopener"
orrel="noreferrer"
totarget="_blank"
links. When you link to a page on another site usingtarget=”_blank”
attribute , you can expose your site to performance and security issues.
- Add
border-radius
andoverflow hidden
to the main container that wraps the three cards so you don't have to setborder-radius
to individual corners.
Hopefully this feedback helps.
Marked as helpful1 - About
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