Design comparison
SolutionDesign
Solution retrospective
On mobile design, the image (.office-image) is smaller than its container (.image-container) for some reason. I set the .image-container::after height to 98.5% to fit it, bit it does not look clean.
Community feedback
- @correlucasPosted over 2 years ago
πΎHello Nomatter, congratulations for your new solution!
Here's how you can fix the issue with the mobile image:
To make your image fully responsive add
display: block
andmax-width: 100%
andobject-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!
Marked as helpful1
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