Submitted 5 months ago

Product Preview Card Component

Eugene Amedior• 140

@Eugene-ak

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 are you most proud of, and what would you do differently next time?

I am proud I finally completed this challenge completing this challenge. It had me for days.

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

I found it difficult to display either the desktop image or mobile image based on the viewport width. I initially used state and the useEffect hook in next js but it didn't entirely solve the problem. I also tried the css ::after pseudoclass and that also brought about new issues. I later found out about the html picture element which was just suitable to solve this.

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

I will learn more about how the html picture element is used and best practices.

Community feedback

Mary2021• 190

@Mary2021

Posted 3 months ago

Nicely accompliced solution, Eugene! I like the clean and simple structure of your Sass code.

Found couple of good sites explaining html picture element:

I find especially handy, that its possible to add different images for instance tablet(landscape/1200px) and desktop(portrait/1200px).

<picture>
  <source media="(orientation: landscape)" ... />
  <source media="(orientation: landscape) and (min-width: 1200px)" ... />
</picture>

I fond a little bug in your solution. In mobile view content is longer than class main (home.module.scss) height. It resolved when removing the height property.

.main {
    height: 100vh;
    ...
}

Marked as helpful

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