Design comparison
Solution retrospective
I found it difficult to align the background images. It would be kind of you to let me know how I could have made it more easier or to be precise how I could have made it more responsive. Thank you in advance
Community feedback
- @SoftwaReallesPosted over 3 years ago
Muito bom, parabéns. About background images: https://www.youtube.com/watch?v=O7WbVj5apxU
1 - Account deleted
Hello , Manish! Congrats on completing this challange! 😀
However,1.Your card width is collapsing when I reduce the width of the screen because you have used
vw
or viewport-width in your card. Userem
orem
orpx
to fix it. For example, you can use.card{ width :400px ; }
to fix the issue.2.For the background Images you can use absolute positioning.For example, you can create two image tags to hold the images, you can give classname
firstImage
andsecondImage
for first and second image.Then you can go to css and usebody{position:relative; overflow:hidden;}
and then create.firstImage{position:absolute; top:0; left:0;}
and.secondImage{position:absolute;right:0;bottom:0;}
to position the background images more accurately.You have to decrease the width of the background images according to the width of your screensize by using media queries.Have fun coding!🎉🎉
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