Skip to content
Submitted over 2 years ago

Mobile First Responsive Page utilizing CSS Grid & Flexbox

Jose Chaparro•455
@jchapar
A solution to the Skilled e-learning landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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!

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Jeff Lang•340
    @jefflangtech

    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 and background-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 helpful
  • Souleymane Sy•980
    @SouleymaneSy7

    Good Job for completing this challenges!

    Marked as helpful

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