Submitted 9 months ago

Responsive landing page Grid CSS, Sass

sass/scss

Scott•310

@ldg

A solution to the Meet landing page challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm happy that I was able to get this to work between all the screen sizes.

What challenges did you encounter, and how did you overcome them?

This was an interesting challenge with the banner header image having to be split on desktop. I solved this by making the banner image on mobile / tablet as a background image. So when I moved to desktop screen sizes I just set the background image container to height:0 to hide the mobile banner and using media queries I revealed the left and right banner images, which I had hidden with CSS.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Scott's solution.

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