Skip to content
Submitted almost 2 years ago

Mobile First Responsive Page utilizing CSS Grid & Flexbox

Jose Chaparro•455
@jchapar
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Skilled e-learning landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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

  • Jeff Lang•280
    @jefflangtechPosted almost 2 years 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 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
    0
  • Souleymane Sy•980
    @SouleymaneSy7Posted almost 2 years ago

    Good Job for completing this challenges!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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