Responsive product card using flex

Community feedback

• 

  Jake Samuels•780

  @jake4369Posted 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

  0

  ---

  

  Rita Tang•200

  @ritatanghtPosted 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.

  0
• 

  Amine Elkhalidy•0

  @AmineElkhalidyPosted 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

  0

  ---

  

  Rita Tang•200

  @ritatanghtPosted 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?

  0