Submitted over 1 year ago

RESPONSIVE Product Review Card using Media Query (Desktop/Mobile)

arjuyyy•40

@arjuyyy

Preview site View code

This is a solution for...Product preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

To be honest, I easily build the markup and was able to quickly imitate the provided desktop design. What I found hard is the mobile design since this must be responsive based on the width of the screen. At first, I'm quite hesitant to manually change the width and height of the "image-desktop-product.jpg" (which is the perfume) since I might possibly ruin the image. But when I was about to upload all the files in my repository, it turns out that there's the "image-mobile-product.jpg" inside the images folder!!! The heck lmao, this is just a reminder to be mindful of the provided resources so that we can all save more time lol.

The ability to manipulate and use display properties such as FLEX, BLOCK, HIDDEN, and of course MEDIA QUERY really helped me in this challenge. Big thanks to the StackOverflow community for providing me with the answer on "How to make an element's background color a little darker using CSS".

Community feedback

Pipow•500
@PipouwPieuwPosted over 1 year ago
Hello and well done completing this challenge, your component look good!

I have a few suggestions to further improve it:

To handle the responsive behaviour of the image, instead of using two <img> you could use a picture element.

A good alt attribute shouldn't just repeat the name of the product. Here you should really describe the image as you would describe it to someone that can't see it.

You could use a greater breakpoint to display the mobile version. Try viewing your page with a window width set to ~ 400-500px, you'll see it's all cramped.

To make the button hover effect a little better you could use a transition (0.2s / 0.3s is usually enough).

Apart from these minor matters, you did a really good job! Keep going :)
0

Please log in to post a comment

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