![](https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_900/Screenshots/qqeu2v3dm0d8khrlormg.jpg)
Design comparison
Solution retrospective
Was happy to do this small project using astro build environment. The documentation provided clear steps on getting a gitlab pages build automatically. Although the project did not require many of the features astro provided, at least this experience will help with future attempts
What challenges did you encounter, and how did you overcome them?Was not able to perfectly match the mobile design. In particular, the image will truncate when in the mobile view while preserving the rounded edges.
To get the truncating behaviour, I thought I would need to put the image inside of a div with rounded border that changes size, and use overflow: hidden to visually truncate the image on mobile.
However, when I tried this approach, I could not get the rounded border of the surrounding div to perfectly match the height of the image. Unfortunately I decided the rounded corner on the image was more important than the truncation
What specific areas of your project would you like help with?If anyone has any hints on how to truncate the edges of the image, I would like to hear the secret behind the magic trick :)
Thanks for reading!
Community feedback
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