Submitted about 2 months ago

Responsive product card

BekzodIsakov• 100

@BekzodIsakov

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Most elements have different margin-bottom is mobile viewport. I had to use media-query for each element separately which caused code repetition. Instead I replaced it with sass mixin and a loop to apply style properties passed as mixin arguments. I couldn't use hard coded arguments since each element can accept different styles

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted about 2 months ago

Hi!

Interesting work. You have clean html structure and neat code organization =) But why did you need an overlay for the picture, f you don't mind me asking?

BekzodIsakov• 100

@BekzodIsakov

Posted about 2 months ago

Thanks! @Alex-Archer-I . I used it to darken the image with backdrop-filter as given in the design. After your question, I started doubting my solution and found out that I could've simply used filter property for the image element which I either didn't know or forgot

Alex• 3,130

@Alex-Archer-I

Posted about 2 months ago

@BekzodIsakov

Oh, yeah, I wanted to tell about filter but decided to ask first, just in case! That's cool that you pay attention to details =)

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