Design comparison
SolutionDesign
Solution retrospective
What challenges did you encounter, and how did you overcome them?
Recipe image and padding in responsive view. I ended up using a div as a wrapper and media queries.
Community feedback
- @L4r4TWPosted 2 months ago
It's a pleasure to see a so perfect solution. The mobile view is also beautiful.
Making the image responsive was a huge pain for me to, I copy my mediaquery selection, hopefully it will show you something helpful:
/* Remove border radius on mobile screens */ @media (max-width: 768px) { /* Adjust the breakpoint as needed */ .container { border-radius: 0; /* Remove border radius on mobile */ margin: 0; padding-top: 0; /* box-sizing: content-box; */ } .container img { border-radius: 0; width: 100vw; height: auto; margin-left: calc((-100vw + 100%) / 2); } }
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