Mobile First Responsive Page utilizing CSS Grid & Flexbox
Design comparison
Solution retrospective
Hello Everyone! I very happy with how my challenge looks on the specific width dimensions shown in the Figma file. However, when I'm in between width sizes or playing with the width of my browser, my some components are off. Specifically the images. Any feedback how making images a bit more responsive would be greatly appreciated!
Community feedback
- @jefflangtechPosted over 1 year ago
Hey Jose! π
What I tried with this challenge was using
background-image
on the div or section versus a specific image element.Background-image
gets you access to these other properties:background-position
background-repeat
background-size
and more!On my project I got a bit more specific using
background-position-x
andbackground-position-y
to place that image exactly where I wanted it on (or off) the page. And by making those dynamic in media queries the image could move around a bit during resizing.Let me know what you think of my solution! E-learning landing page
Nice job! Hope you have fun coding!
Marked as helpful0 - @SouleymaneSy7Posted over 1 year ago
Good Job for completing this challenges!
Marked as helpful0
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