Submitted over 2 years agoA solution to the Product preview card component challenge
CSS HTML product preview card
@juliavilbert
Solution retrospective
Guys this is my third project and I still couldnt figure out how to eliminate that line under the image, feedback welcome! Do I need to use <main> the way i used it? How to make that main image fit the whole content? thanks :)
Code
Please log in to post a comment
Log in with GitHubCommunity feedback
- @GioCura
Hi! Add "vertical-align: bottom" to your ".image img" and the empty space will disappear. 🙂
Marked as helpful - @frank-itachi
Hello there 👋. Congratulation for completing the challenge👍!
I have some suggestions about your code that might interest you.
HTML 📄:
- Since the mobile design has a different image, you can use the
<picture>tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here. - Get rid of the
<div class="container">because it’s having no effect to the descendant element. Keeping the body element rules you already have will work as well.
CSS 🎨:
- You can also use the
text-transform: uppercase;property to make the perfume word appear in upper case even though you typed it in lower case in the HTML file.
I hope you find it useful! 😄 Above all, you did a good job!
Happy
<coding />😎!Marked as helpful - Since the mobile design has a different image, you can use the
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