Submitted over 1 year ago

Flexbox and responsive images with picture element

Riley• 260

@rileydevdzn

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

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!

Community feedback

Aghla Abdo• 340

@AghlaAbdo

Posted over 1 year ago

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 😊

Riley• 260

@rileydevdzn

Posted over 1 year ago

Hi @Aghlaabdo!

Yeah that little hop with the text is kind of bugging me lol. Adjusted the fonts, I think it's because I also adjusted the design itself slightly to be more efficient. I'll keep playing with it to see if I can eliminate the hop. 😃

Thanks for the feedback!

James Dennis• 220

@emarketguy27

Posted over 1 year ago

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.

Riley• 260

@rileydevdzn

Posted over 1 year ago

Hi James!

Thanks! Percentages worked okay here, but not my favorite. If the fonts were changing I was thinking em, playing with that on my current build. Hmm I was thinking about using clamp, feel like I've been using it on everything lately though ha, so was trying to explore other alternatives too.

I've just been using clamp on individual elements, haven't tried as a global style under root yet, that's an interesting idea!

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