Skip to content
Submitted almost 3 years ago

Responsive Card Using Grid and Flex

Andrew Festa•50
@afesta12
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

My solution feels quite a bit 'hacky', which is the best word I could come up with.

I could not get things to line up correctly using flex, so I switched the layout between flex and grid during a media query, which I'm assuming is not a best practice solution.

I did learn a bit about displaying different images, but is there a preferred method to doing this? Display none seemed to work, but I also read about people using a background image.

Thank you, and any feedback is highly appreciated! =)

Code

Please log in to post a comment

Log in

Community feedback

  • Kenyon Tu•390
    @kenyontu

    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
  • 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
  • faizan•2,420
    @afaiz-space

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

  • Chiquita Minor•170
    @MichelleMinor87

    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.

  • Adam M•550
    @AdamMzkr

    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;)

  • allys•90
    @allyskorsah

    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.

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