Skip to content
Submitted over 2 years ago

Flexbox and responsive images with picture element

Riley•260
@rileydevdzn
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys!

Back at it with responsive images, this time using the <picture> element. And exploring more of Flexbox's capabilities with the goal of minimizing the number of media queries I needed.

Had a couple of responsive design questions, thoughts/suggestions/feedback is welcome!

  • I used percentages for margin between the text elements since the spacing varies but the font sizes don't change in this challenge. row-gap (and gap in general) for Flexbox and Grid are great when the spacing is identical, but I couldn't find a way to implement different gaps without adding a bunch more elements and styling. Using percentages required an additional media query in order to match the design. Does anyone know of a better approach for this?
  • I've been using absolute (px) units for border-radius but would be more inclined to use em if I used relative units. Thoughts on em vs. percentage vs. viewport units for border-radius?

Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Aghla Abdo•340
    @AghlaAbdo

    That's awesome, you really did a great job

    I cannot differentiate between you solution and the origin image. If you could just make some small changes to the font size and match it with origin image so you can't see the small dance of the text when you scroll between your solution and the design😅.

    There is nothing else to say. Good Luck for your coding Journey 😊

  • James Dennis•220
    @emarketguy27

    Hi Riley, Great job - the solution is pretty spot-on.

    As to your question about implementing different gaps to minimize styling... I have been experimenting with 'clamp' settings as 'global styles' declared under .root

    I'm finding that using 'clamp' for font-sizes and image sizes allows for a nice responsive scaling of the relevant elements without the need to add extra font size / image size styling in media queries.

    Best regards.

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