Skip to content
Submitted almost 3 years ago

Somewhat responsive page using css grid

Alexandru Stefan Gherhes•580
@AlexandruStefanGherhes
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Tried using the picture element and the img element with srcset to have the images switch at certain breakpoints but the browser was reading only the src image so it was not working, eventually i switched to background img with media query breakpoint, but the mobile img zoomes in as you increase the with of the viewport.

Any advice would be appreciated!

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Good job on your project!

    Since this a product card, it really isn't meant to continuously expand like like full website; it should have two fixed designs... mobile and desktop.

    To fixed how you card looks in mobile view, change the width size in your wrapper class to 375px

    Next, change the min-width of your media to 610px and add a max-width of 600px to your wrapper class (in the media section).

    With those changes your card should look the way you want it to.

    Happy Coding!

    Marked as helpful
  • Warren•650
    @warrenlee

    Hey Alexandru, good work on the challenge, I think how you tackle the image using background-image with grid works well quite! But as you've pointed out the image for mobile zooms and that's because of the CSS property background-size: cover and the also the way grid cells behave where all cells have the same dimensions according to the large cell.

    If you want to look back into the picture solution again have a look at my take on this. https://bitbucket.org/warrenlee/frontend-mentor/src/7d9890d17383b78420d658897ccfe816ee62f71a/product-preview-card-component/index.html#lines-14:17 Just make sure you use media="min-width: XXpx" rather than max-width in the source tag and make the source cascade so that large min-width starts from the top.

    Hope that helps!

    Marked as helpful

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