Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Html Css

@harish250

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please review my design suggestions are welcomed

Community feedback

Sarah 835

@sarahc-dev

Posted

This looks great!

My only feedback would be to design for mobile first - so use min-width in your media query, instead of designing for max-width. Also set the px value of your media query to suit your design - for example if I manually adjust the viewport, it overflows the screen before it adjusts to the smaller screen view.

Hope that helps :)

1

@harish250

Posted

@sazzledazzle do we need to use max-width property for the problem of overflow of the contents

0
Sarah 835

@sarahc-dev

Posted

@harish250 On this design just make your media query px bigger, so it switches to the smaller screen layout before it starts to overflow - say @media (max-width: 900px) instead. You could then add a max-width: 500px on the card-text - so it doesn't stretch across the whole div as it gets bigger.

It's not 100% necessary, because the spec is only for two sizes - mobile and desktop - but it's a good habit to make it look good at all sizes, just by one small change.

CSS Grid also has the ability to wrap - so if a grid like this gets too big for the screen the third column would drop to a new row. I wouldn't use that here, but may be useful in the future!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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