responsive product card using css grid and media queries
Design comparison
Solution retrospective
how to make this more better?
Community feedback
- @fermopPosted almost 2 years ago
Hi Akash, how are you?
I really liked the result of your project, but I have one tip that I think you will like:
I noticed that the discount price doesn't have the line-through just as the design has, to fix this we can do the following:
.price-2{ position: absolute; color: gray; padding-top: 13px; ๐๐ฒ๐ ๐-๐ฑ๐ฒ๐ฐ๐ผ๐ฟ๐ฎ๐๐ถ๐ผ๐ป: ๐น๐ถ๐ป๐ฒ-๐๐ต๐ฟ๐ผ๐๐ด๐ต; }
The rest is great!!
Hope it helps ๐
Marked as helpful1 - @NikolaD93Posted almost 2 years ago
Hello there! ๐
Congrats for completing the challenge! ๐
I have a suggestion for you:
1.You can do some reset CSS styles. By resetting your styles, you avoid defaulting to the browserโs built-in styles, which differs from browser to browser. ๐
You can reset styles like this, just write the following code in the CSS file:
- { margin: 0; padding: 0; box-sizing: border-box; }
Hope this was helpful for you!
Happy holidays! ๐โ
Marked as helpful1 - @VCaramesPosted almost 2 years ago
Hey there! ๐ Here are some suggestions to help improve your code:
- The imageโs
alt tag
description needs to be improved upon โ ๏ธ. Assume that you are describing the image to a someone over the phone.
More Info:๐
https://www.w3.org/WAI/tutorials/images/
- This component requires the use of two images ๐ at different breakpoints โ ๏ธ. The
picture
element will facilitate this.
Here is an example of how it works: EXAMPLE
Syntax:
<picture> <source media="(min-width: )" srcset=""> <img src="" alt=""> </picture>
More Info:๐
https://www.w3schools.com/html/html_images_picture.asp
- Do not uppercase โ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.
- The only heading โ ๏ธ in this component, is the name of the perfume; โGabrielle Essence Eau De Parfumโ . The rest of the text should be wrapped in a
paragraph
element.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding! ๐๐๐ช
Marked as helpful0 - The imageโs
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