flexbox and css used

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Nice work on this challenge, Nada, and congratulations on submitting your first solution!

  Just a quick heads up that the vh units you're using are throwing off the screenshot. As a rule, I would recommend only using vh units in very rare and very specific instances. This is because you're sizing the element based on the viewport instead of the height of the content inside, which can lead to unintended UI issues.

  As an example, if you look at your preview, keep the width of the browser at full-width but start reducing the height you'll see the second section starts to overlap the top section.

  Instead, don't set an explicit height on the parent and then just use padding and margin to space out the content within it. This way the height of the parent will be flexible based on the height of the content.

  Here are some other pointers after taking a look at your code:

  • I'd recommend giving your classes more meaningful names. For example, .g1b4 means nothing to me personally, so it's hard to understand what the class is for as a new developer coming into the project.
  • I'd recommend reviewing the styles you've got for mobile and small tablet screen sizes. The content is looking very squashed.
  • Also, on a future project, I'd recommend using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain. So definitely worth a try.

  I hope this helps. Keep up the great work! 👍

  0