Responsive Card Using Grid and Flex

Community feedback

• 

  Kenyon Tu•390

  @kenyontuPosted over 2 years ago

  One way to avoid switching between flex and grid, would be to use grid with a single column on smaller screen sizes

  To display different images, I would recommend reading about the picture element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

  Marked as helpful

  1
• Account deleted

  This looks good! I'm not quite sure what the best solution would be as I used a background image on this project - You should be able to use one class for your image and change it in your media query, but I haven't done this myself... yet.

  I can, however, say for sure that the background image is not the way to go, since you can't put an alt tag on the image if you go that route. While I'm mentioning that, it looks like you do have a description in your alt tag for the mobile image, but not the desktop one 😉

  Marked as helpful

  1

  ---

  

  Andrew Festa•50

  @afesta12Posted over 2 years ago

  @LazyDuckling thank you! Ahh thank you for pointing that out as well, meant to double check the image alt tags too oops

  0
• 

  faizan•2,420

  @afaiz-spacePosted over 2 years ago

  Hey @afesta12, congratulation on completing the challenges. a complete project without any bugs or errors.

  1
• 

  Chiquita Minor•170

  @MichelleMinor87Posted over 2 years ago

  This looks amazing! I learned about the picture tag recently and it helps with responsiveness as well so try that tag on your next challenge. I'm not sure about the flexbox and switching to grid neither. I think over time you will find what works for you honestly. I think that grid is great for certain projects as well as flexbox, but I guess they both should be fine.

  1
• 

  Adam M•550

  @AdamMzkrPosted over 2 years ago

  Hi i finished this challenge only use flexbox, i use @media and in desktop( mobile first) view i only change of size divs with % and flex-direction. I don't use a PX to resize element, I use em and rem.

  I hope it will be helpfull;)

  1
• 

  allys•90

  @allyskorsahPosted over 2 years ago

  Hello @afesta12 well done on completing the challenge. I also used the same methods you used. I don't think switching between flex and grid is that bad. I would have to check out the display none thing though.

  1

  ---

  

  Andrew Festa•50

  @afesta12Posted over 2 years ago

  @allyskorsah thank you! Yeah it made the layout much easier to work with when switching between mobile and desktop

  0