Design comparison
Solution retrospective
the challenges
- responsiveness.
- fitting the image to a proper size as show in the preview.
- the pop-up share button and its closing logic development.
Community feedback
- @correlucasPosted about 2 years ago
๐พHello @amaar09, congratulations for your new solution!
Answering your question:
The container is yet responsive, now all you need to do its to make the image responsive too, I saw that you've used
width
andmax-width
together inside the img/class selector you cannot use both properties together,to fix this behavior and have image resizing, usemax-width
. image inside the container scaling and respecting the size of the container, you need to addmax-width: 100%
and add alsoobject-fit: cover
to make the image auto-crop when resizing inside the column:img { display: block; object-fit: cover; max-width: 100%; }
โ๏ธ I hope this helps you and happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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