Lucas 👾• 104,420
@correlucas
Posted
👾Hello Eman, congratulations for your solution!
Your card component is just perfect and also responsive, to manage better the images you can use <picture> instead of <img> + css to switch images with a media query. Using <picture> you can wrap both desktop and mobile images together and set when they should swap between devices all inside the html code.
Note that you text isn't fitting the container after 250px, to solve that you can create a media query to make the price text separate in two different rows:
@media (max-width: 200px) {
.price {
display: flex;
flex-direction: column;
}}
Hope it helps and happy coding!
Marked as helpful
0
