Skip to content
Submitted 7 months ago

Product Preview Card Component

Eugene Amedior•140
@Eugene-ak
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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
    @Mary2021Posted 6 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
    1

Please log in to post a comment

Log in with GitHub

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