Submitted almost 2 years ago

Responsive product card using flex

Rita Tang• 200

@ritatanght

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

Not sure if this is the correct way (set as background-image) to fit an image in a grid that would resize according to the size of the grid. I am also wondering whether a similar result could be achieved using an image tag in the HTML. I've tried with styles like {width: 100%; height: auto} or the reverse, but the image scales down too much when the width of the screen shrinks leaving blank space at the bottom.

Community feedback

Jake Samuels• 780

@jake4369

Posted almost 2 years ago

Hi, you solution looks great congratulations!

One way to handle responsive images that change is to use the <picture></picture> tag instead of using background images. You can specify multiple images and media queries inside the picture tag, and the images will respond and change whenever you resize the browser window. It's a great alternative to using background images.

Check out w3Schools if you'd like to learn more about how to use the picture tag, it's really easy to use once you've had a bit of practice with, you'll begin to use it over and over again doing the challenges of Frontend Mentor so it's a great tool. to have.

Here's the link:

https://www.w3schools.com/tags/tag_picture.asp

I hope you find this useful, happy coding ☺️

Marked as helpful

Rita Tang• 200

@ritatanght

Posted almost 2 years ago

@jake4369 Thanks a lot for the feedback. You have introduced me to a great tool! I used to use display: none/ inline-block to change between images for different screen sizes.

Amine Elkhalidy• 0

@AmineElkhalidy

Posted almost 2 years ago

Hi @Rita, I am Amine Elkhalidy, a Front-End web developer, and I want to help you with your solution if you don't mind

Using the image tag in this case would be better than setting it as a background image, you just need to wrapp it within a div tag, give the div some fixed height, and make the image 100% height and width of its parent, or just set the img tag style to height: auto; max-width: 100%

one other side note: whenever you have to create one dimensional layout use flex

Hope I helped, if not, or it's not clear what I said, I can help you on github

Rita Tang• 200

@ritatanght

Posted almost 2 years ago

@AmineElkhalidy

Hi Amine, thank you very much for the feedback and suggestions.

For the first method, I've tried setting the div to fixed height, the px to pick needs to be chosen with some trials and errors though, I came up with the desired result.

While for the second method, I'm not sure if I have done something wrong, I still have my previous problem where when the screen gets down to about 600px, the image will continue to shrink leaving white space at the bottom.

And where you mentioned to use flex for one-dimensional layout, I guess you mean for the image div and the text div inside the card? I have revised my CSS in doing so, but since I can't assign the proportion for both div like for grid, I have used width and height % to set their sizes and hide the overflown part of the image. May I know if this is the correct way to approach such a layout?

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