CSS Flexbox and GRID, Positions

Community feedback

• 

  Maan Al-Hababi•190

  @MaanAlHababiPosted 4 months ago

  Hey, Anton!

  Nice work recreating this project, but allow me to point out that you overlooked the mobile design. A major part of the project is building a responsive web application. Which means, your website should adapt to different screen sizes.

  I recommend you go through the responsive web design learning path here on Frontend Mentor, but here is a brief insight. A convenient approach is going Mobile-first which means you start by designing the website for mobile devices since usually websites are simpler on smaller screens. Then, add complexity as the size of the screen increases which can be established through media queries.

  In your code, you explicitly set a size for the website:

  body {
      max-width: 1440px;
      height: 150vh;
  }
  

  This way only a select number of users get to enjoy the best experience on your website, users with larger screen sizes see the content centered relative to this max-width, while the page as a whole is actually aligned to the left.

  Finally, it is best not to set a 'hard-constraint' height on the page. In your case this just created a bunch of unnecessary white space beneath the main content of your website.

  Marked as helpful

  0