Design comparison
Solution retrospective
I was not sure how I could achieve the "cut-off corner" look in the desktop view for the woman online image. If anyone knows how to get this to work let me know. I tried using z-index but I am not experienced enough to get it to work. Unless there is another way. Any suggestions are appreciated. Also anything wider than 1440px, the orange box will move because I used absolute positioning, How do I make it stay where I want it with all larger screen sizes? Thanks in advance. Other than that completing this challenge taught me about the <details> HTML tag and how to use it.
Community feedback
- @hrk-berserker27Posted over 2 years ago
Following are hacks that I used to get rid of these problems while completing the challenge:
- If I am not wrong, the "cutoff of the corner" you are talking about is the overflowing part of the woman illustration image. You can get it right by enclosing the illustration in a div and adding "overflow: hidden" in the styles. It will hide the overflow part.
- To not allow the absolute positioning to alter the position of the image on increasing the screen size, you can add the "position: relative" to the container relative to which you want to fix its position and set the top and left properties in "em" units which should work.
- You might have missed the background of the illustration SVG's section.
If it doesn't work, then you can check out my code.
Marked as helpful1@CrypticMangoPosted over 2 years ago@hrk-berserker27 Okay thanks! and I noticed that the background seemed to have disappeared when I uploaded my solution but when I look at my solution on my pc it's there so I'm not sure if something is not being displayed properly on the solution page or if it's another error.
1
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