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 CHANEL Product Preview

Yoshi 50

@ysstudio22

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


What are you most proud of, and what would you do differently next time?

Applying different images for different view ports. I had to do a bit of research but it was worth it.

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

The biggest challenge was eyeballing the card sizes for the mobile and desktop view. I went back and forth between the design, but the previous challenges provided the foundation for this current challenge.

What specific areas of your project would you like help with?

I might try to tweak the spacing between the svg and "Add to Cart" text inside the button.

Community feedback

@thomashertog

Posted

Looks pretty good. Found some elements with explicit height. You may want to remove that to reduce unexpected behavior.

Try avoiding the use of ID selectors as they are highly specific and are to be used very sparingly

Marked as helpful

1

Yoshi 50

@ysstudio22

Posted

Thanks @thomashertog. I took a look at my css and made the edits.

0

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