Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive product card using flexbox, rem units, and a media query

@CuriousFullStacks

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


any feedback or advice is appreciated! I had a lot of fun making this and I'm not sure if I could do anything better. I had some thoughts of possibly overusing rem units in this case?

Community feedback

@DanonymousCoder

Posted

Nice work bro, keep grinding. Your work is awesome you still need to do some little adjustment. Firstly, the element 'Perfume' isn't given the right color and also you need to add a letter spacing to it. Secondly, your slashed price is not in the right position. It should be at the upper part of the actual price. Thirdly the responsiveness is not looking really good, you should the image to the image given for the mobile view. And also, adjust the height of the container and make it automatically appear at the center of the screen.

Marked as helpful

2

@CuriousFullStacks

Posted

@DanonymousCoder thank you for the feedback on this, I hadn't noticed the color at all until you pointed that out. As for the responsiveness I just pushed new code that should have fixed most of the issues!

0
Omar 240

@omar-csdev

Posted

Hi, it looks good on large screens but not so much on smaller devices. I advice you to check that out and make it responsive using @media queries. Also on smaller devices the image should change to the mobile image provided in the files. You can achieve this using the <picture> tag, look that up it's not difficult. Good luck!

Marked as helpful

1

@CuriousFullStacks

Posted

@iHesh84 Thank you for the feedback, mobile should be fixed now with the proper image used!

0

@hameedmodibbo

Posted

@iHesh84 please how can i switch from the desktop to mobile image using the <picture> tag

0
Omar 240

@omar-csdev

Posted

@hameedmodibbo This was my solution: <picture> <source srcset="/images/image-product-mobile.jpg" media="(max-width: 600px)" /> <img class="parfum-bottle" src="/images/image-product-desktop.jpg" alt="Gabrielle Chanel Paris Parfum Bottle" /> </picture> As you can see the media property controls when the image swaps and the srcset controls to which image it swaps to! Try out and tell me.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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