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

Responsive landing page using sass, flexbox, html

Zana 180

@Zana994

Desktop design screenshot for the Loopstudios landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback?

Community feedback

@BasileRaiwet

Posted

Hi Zana ! Great work ! here are some ideas to improve your solution :

  • the gallery section is a bit tight on my 13 inch device (boxes are touching each other). Maybe you can put some margin between each boxes (or use gap but gap is not well supported actually). If you want to try, you can use css grid to build this section. I think it will be easier.

  • you define your section width with width: 80% on your .frame class. The problem is that your container (and potentially his children) will extend too much on large screens. In most cases, it's better to set the width with a strict value (like on this website). In this way, the content will be centered and your website will be readable on any screen size

1

Zana 180

@Zana994

Posted

@BasileRaiwet Thank you so much for suggestions. I will try to improve my solution. For the section width, I set max-width so my container won't stretch on large screens. If I set strict value for width I will have to change it for every breakpoint or am I wrong? Thank you for your time.

0

@BasileRaiwet

Posted

@Zana994 I didn't see your .wrapper class. So, in this situation, It will work and your content will not stretch on large sceen. But imagine if you want a particular background color for a spectific section inside this wrapper container, you will have some troubles..

But in your case, it work :) To be more clean, you can reduce the .wrapper max-width and set some margin on your sub sections

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