responsive landing page using media query and flex box

Community feedback

• 

  Moustafa Mahmoud•245

  @DevMoustafa97Posted over 4 years ago

  Why my solution always taller than the design ?!!!

  0

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @DevMoustafa97 hey Moustafa, the vh units in your CSS are throwing off the screenshot at the moment.

  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 content starts getting a bit squashed.

  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.

  Once you've made those changes, take a new screenshot and it should resolve the issue.

  Nice work on this challenge by the way. Your solution looks great! 👍

  1