Skip to content
Submitted 3 months ago

Product Preview Card HTML/CSS

P
ComputerEnjoyer•160
@ComputerEnjoyer
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 challenges did you encounter, and how did you overcome them?

Took me a while to figure out how to handle the change in grid layout and to render the correct image depending on the viewport width. I was initially trying with srcset inside the img, but ended up needing to use instead.

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

I would have preferred to solve this with grid-auto-columns/rows, but I ended up having issues with the image sizing, where the image would just be way too big.

I wonder if there is an elegant way to use grid-auto-columns/rows or if grid-template-columns/rows is just the way to go when managing full-bleed vs padded content.

Community feedback

  • Jasper•130
    @jaspervo91Posted 3 months ago

    Hi ComputerEnjoyer,

    It's possible to achieve the fifty-fifty layout pattern without a media query using flexbox or CSS grid.

    The Fifty-Fifty Split and Overflow

    Also I’m curious why the hover state is wrapped in a media query.

    Greetings, Jasper

    Marked as helpful
    1
    P
    ComputerEnjoyer•160
    @ComputerEnjoyerPosted 3 months ago

    @jaspervo91 Thanks for the feedback, Jasper!

    Regarding hover being wrapped in a media query: I don't typically do that, and in fact I didn't even know that it was supported until recently. The main idea here is to avoid janky behavior on touchscreens so that the :hover is not even rendered if the device doesn't explicitly support hover.

    Hover and Any-Hover

    Not sure how much it really matters in the end.

    1
    Jasper•130
    @jaspervo91Posted 3 months ago

    @ComputerEnjoyer Thanks! I learned something new.

    0

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