Design comparison
Solution retrospective
This design was not that challenging once I got to know my way around it. What I particularly want to get right, is to fill a component with elements and get its size right.
Another thing, on my solution, the backgrounds are visible on the corners but I couldn't pinpoint the elements that I had to style to make that disappear; would really appreciate any help with that.
Community feedback
- @whojr01Posted over 3 years ago
At size greater than 1440px both the mobile and desktop images display this is because of your media query. Maybe you could use a max-width too restrict the screen growth or set a very high boundary.
I liked the way you structured your HTML and naming convention was very clear and concise. I enjoyed reading your code and in reading your css I learned about mix-blend-mode.
Awesome! :-)
0@VernonDodoPosted over 3 years ago@whojr01 Thank you. I'm using a 32-inch LED TV as a monitor and the resolution is just crazy; will do exactly as you advised.
0 - @krisp-devPosted over 3 years ago
Setting 'overflow: hidden' on your .container class where you declared your border-radius should fix the issue with visible corners.
0@VernonDodoPosted over 3 years ago@krisp-dev Thank you for this; was exactly what I was looking for.
0
Please log in to post a comment
Log in with GitHub
Join 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