Hey!
Yes, it's usually enough to have breakpoints for the standard sizes! Usually, you start "mobile-first", and then add a @media (min-width: <tablet breakpoint>)
for the tablet styles, and then add another breakpoint for desktop, if necessary.
The image in the solution gets distorted because it's set to have width: 100%
and height: 100%
, which means it has to stretch to fill its parent container. If you remove height: 100%
, the height can be calculated automatically from the image's width.
You might then want to add align-items: center
to the .grid-container
to have the image align nicely with the text!
Marked as helpful
@diwakharpandyan
Posted
Sure @markuslewin... That was really helpful..Thanks.. will do Mobile -first approach from the next project...