Design comparison
SolutionDesign
Solution retrospective
the landing pics are the hardest
Community feedback
- @UserAhmad2001Posted about 2 years ago
Salaam alaikum
Hello Abdulkareem
You are right, I struggled quite a bit myself at that part.
If you want an easier way to achieve a responsive result, You should use a
transform: translate() ;
css property to style the phones image, It Works like magic:.home-section-images{ flex-basis: 50%; width: 100%; position: relative; } .home-section-images .phones-img{ width: 100%; position: relative; left: 100%; transform: translate(-83%,-15%); z-index: -1; } .home-section-images .phones-bg{ width: 400%; position: absolute; left: 100%; transform: translate(-25%,-25%); z-index: -10; }
Assuming that you used a flex display to align the home section texts and images
Hope i was of help to you, Tell me if you have any questions.
Happy Coding, And Best Regards
Ahmad
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