Responsive landing page using sass, flexbox, html

Community feedback

• 

  Basile Raiwet•175

  @BasileRaiwetPosted almost 4 years ago

  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

  @Zana994Posted almost 4 years ago

  @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

  

  Basile Raiwet•175

  @BasileRaiwetPosted almost 4 years ago

  @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