@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 :)
@sazzledazzle do we need to use max-width property for the problem of overflow of the contents
@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!
@sazzledazzle ok thanks