Product Preview Card Component

Solution retrospective
Mobile First -> Desktop Used background-image property to control the image size. Need to learn how to control the size of image using <img> without distorting the image
Please share the feedback it is much appreciated
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AdrianoEscarabote
Hi Dev Gobind Ganguly, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
- To align some content in the center of the screen, always prefer to use
display: flex;
it will make the layout more responsive!
Example:
body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
The rest is great!
I hope it helps... 👍
Marked as helpful - To align some content in the center of the screen, always prefer to use
- @fritzadelbertus
Hello @devgobind. First of all, congratulations on finishing this challenge!
Here are some few suggestion I can give:
- Using
<picture>
tag is a better practice in this challenge where the image source change according to the screen width. See this on how to use it. - The
<h1>
tag is used for the main header of the document so I suggest changing the
<div class="price btm-pad"> <h1 class="d_price">$149.99</h1> <p class="o_price">$169.99</p> </div>
to something simpler like this:
<p class="price">$149.99<span class="o_price">$169.99</span><p>
I hope it's helpful and happy coding!
Marked as helpful - Using
Join 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