Design comparison
Community feedback
- @AshongAbdallah06Posted 12 months ago
Hiii. I have some questions.
- I want to know how the far left corner of the image was done (the part that cuts off).
- The shadow under the image. Do you resize it using height?
0@MarioMinchevskiPosted 12 months ago@AshongAbdallah06
Hi Ashong,
That part was a bit tricky to do.
Imagine that you have your container with two wrappers, an image wrapper an a text wrapper. In the image wrapper you need to have another inner wrapper. The reason for that is so you can have position: relative; on the container and position: absolute; on the box graphic and place it where it is. Then on the inner wrapper you put overflow-x: hidden; and place the image inside it. That way you will have both the box in the right position and the edge of the image cut off.
For the shadow you need to play around a bit with background-position and background-size. It's trial and error until you get it in the right position and the right size. Try using % or rems for those properties instead of the regular predefined ones (e.g. background-size: cover;, etc.).
Hope you find this comment helpful, good luck!
1@AshongAbdallah06Posted 12 months ago@MarioMinchevski Hi I wanted to check out your code for myself but the link to the GitHub code is not working. Can you please edit it so that I can check it out myself thanks
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