Frontend Mentor - Product preview card component
Design comparison
Solution retrospective
My image after my media query was squished until it reached a bigger size, how do you make the image more responsive. How do you add the shopping cart icon to the button?
Community feedback
- @JetyunPosted over 2 years ago
- You can put the cart img tag into the btn class tag
Marked as helpful0 - @elaineleungPosted over 2 years ago
Hi Luis, well done on this second challenge! 🙂
About the image, to make it not squished, it needs to have an
object-fit
property, and you also need to change it to the desktop version when it gets to desktop view. Here's what I'd do:-
Add
object-fit: cover
to yourimg
-
To have both the desktop and mobile images in the HTML, you can use an responsive image tag, with the breakpoint matching what you have in the CSS:
<img alt="Chanel Perfume" style="object-fit: cover;" srcset="images/image-product-desktop.jpg 600w, images/image-product-mobile.jpg 686w" sizes="(min-width: 650px) 600px, 686px" src="images/image-product-mobile.jpg" >
-
Right now the
.container
looks rather small when the breakpoint comes in, and the photo can barely be seen; to fix this, change thewidth: 50%
tomax-width: 600px
. This means that the container will grow to a size of 600px depending on the browser width and will not reach past that width. -
Lastly, add a
width: 50%
to both the.chanel
and.card_body
classes so that the two sections are even.
To add the icon to the shopping cart, try wrapping the text with a
<span>
tag, add in the icon using either<img>
or even directly pasting in the<svg>
, and then give the button adisplay: flex
withjustify-content: center
andalign-items: center
. Good luck!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