Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Idev, congratulations for your new solution!
Nice solution and nice results! You're in the right track.
I've some suggestions for you to improve your code:
1.Use
background-size: container
to have the wave svg background centered and well positioned:body { background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; background-size: contain; background-color: hsl(225, 100%, 94%); margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; font-family: 'Red Hat Display', sans-serif; }
2.You can use
relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.βοΈ I hope this helps you and happy coding!
Marked as helpful1 - @AdrianoEscarabotePosted about 2 years ago
Hi @IDev11, how are you?
You did a great job on this challenge, but I have a few tips that I think you'll like.
1- Document should have one main landmark, you could have put all the content inside the
main
tag click here2- Page should contain a level-one heading, you could have changed
h2
toh1
[click here to read about it](https://dequeuniversity.com/rules/axe/4.3/page-has- heading-one?application=axeAPI)The rest is great! Hope it helps... π
Marked as helpful1@IDev11Posted about 2 years agoHey @AdrianoEscarabote, I'm good, what about you, my friend?
I have made the changes that you have mentioned above, thank you so much, they were really helpful.
Have a nice day, my friend!
1@AdrianoEscarabotePosted about 2 years ago@IDev11 thanks man. I'm glad to have helped you.
Marked as helpful1
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