Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile First Responsive Page utilizing CSS Grid & Flexbox

@jchapar

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

P
Jeff Lang 280

@jefflangtech

Posted

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

@SouleymaneSy7

Posted

Good Job for completing this challenges!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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