Submitted about 2 months ago

Responsive product card with the help of Flexbox

Ryan Hardy• 110

@ryyHardy

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

What are you most proud of, and what would you do differently next time?

I am proud of how I leveraged Flexbox to handle the layout change between desktop and mobile. It made it so I only needed to write one line of CSS in the media query to make the layout horizontal (switching the flex-direction to row).

What challenges did you encounter, and how did you overcome them?

Scaling images is something I have trouble with. This time, it was a challenge on the desktop design. At first, I tried using flex-grow and flex-shrink to give the image the same width as the text container, but that didn't work. I eventually found a much easier way which was setting each of those elements' widths to 50% in the media query.

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

There is a small issue with the image scaling that happens between screen widths of 375px and 530px. I was wondering why that is happening and how to fix it.

Also, is there a better way to name my CSS variables? I feel like I'm doing that wrong.

Community feedback

Alex• 3,130

@Alex-Archer-I

Posted about 2 months ago

Hey!

Congrats with new challenge =)

The only inconsistency with the design I see is the font weight of the paragraphs. But that's not a big deal, especially if you want to experiment with styles, propertyes and stuff.

There is a way to switch images in the different versions with HTML. It's a picture tag.

<picture>
    <source srcset="mobile.jpg" media="(max-width: 900px)">
    <img src="desktop.jpg" alt="">
</picture>

You see, it has source tag (there could be few of them) with different media conditions and img tag which will be rendered by default (if no one of conditions are met). And also I suggest you to add cursor: pointer to the button.

And this is the first time I see the ch values =) Why did you choose them?

Overall, it's a great work, keep doing =)

P.S. Like the pizza philosophy =)

Raza Official• 20

@razzaque78656

Posted about 2 months ago

Very Good coding i am impressed by this And also yes it also includes semantic tags and many more More Power to you bro!

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