Design comparison
Solution retrospective
Order Summary Card, place your order now πππππ ------ : ) : ) : ); Please any feedback would be helpful.
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hello Favor Ejiofor, how are you?
I really liked the result of your project, but I have some tips that I think you will 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
h3
toh1
[click here](https://dequeuniversity.com/rules/axe/4.3/page-has-heading-one? application=axeAPI)I noticed that the background image is dropping a lot at higher resolutions, to fix this we can do the following:
body { background-size: 100% 50vmin; }
the rest is great! Hope it helps... π
Marked as helpful1@Fave334Posted about 2 years ago@AdrianoEscarabote I noticed the thing about the background image and I have fixed the problem; updated my repository but thanks for the feedback really helpfulπππππ.
1 - @correlucasPosted about 2 years ago
πΎHello Favour, congratulations for your new solution!
π Nice solution and nice code! I can see that you paid a lot of attention to your code/design. If you donβt mind Iβve some tips for you:
1.Its not so good that you used
overflow: hidden
for the whole content, in this case this property is making the content get cropped when the component gets tiny. Instead of usingoverflow
to make the rounded borders useborder-radius
for each card.2.Your solution is fine but if you note after
max-width: 350px
the pricing content start to pop out the container, to fix that you can use a media query to make the price content goes to different rows@media (max-width: 350px) { .music-section { display: flex; justify-content: center; flex-direction: column; align-items: center; } }
βοΈ I hope this helps you and happy coding!
Marked as helpful0@Fave334Posted about 2 years ago@correlucas Thank you, I always love a good feedback :)
1
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