Design comparison
Solution retrospective
Hi everyone, Working on a newbie project after a while is refreshing to me. If anyone finds some mistake please let me know.
Community feedback
- @pradeeps4iniPosted over 2 years ago
Hi, @DekiDex. How are you, buddy?
- You don't have to write
box-sizing: border-box; }
and then
* , *::after, *::before{ box-sizing: inherit; }
When you use *, it means it applies to all the elements of the page. You could have only used
*, *::after, *::before {box-sizing: border-box;}
.-
You're using "background-image" and media queries to interchange the desktop and mobile images. You could do that with <picture> element in HTML only. Learn more here....
Using background-image for the image which convey information to user is bad for accessibility. You can provide an alt text using <img> element, which is useful for screen reader users.
-
One page should contain only one <h1> element. <h1> is used for the main heading of the page. You should change the <h1> in the "price" container, to <p>.
-
When i resize the screen below 280px. The image of the perfume bottle is gone. This is happening because you've used
@media (min-width: 280px)
. You should remove it.
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