Responsive design using flexbox

Community feedback

• 

  Basit Korai•350

  @basitkoraiPosted over 1 year ago

  Hi, my friend. 👋 I'm so happy you have completed the challenge

  I have a few suggestions to make it better.

  • Remove the margin from your body element, to get rid of the overflow that is adding unnecessary scrollbars on your page.
  • Instead of height: 100vh go for min-height: 100vh; in the body element for centering elements.

  Answer to your question We don't use vh or vw units very often, however in this case you just have a single component in your webpage, so here it's for giving the container (body) a minimum height of 100% of the viewport height. So it will be as big as your screen's height and the elements will be centered relative to the height of your screen.

  Upvote the comment if it helps

  I hope these tips will help you improve your code.😊

  Peace out✌️

  Marked as helpful

  0

  ---

  

  Yashwanth•10

  @yashwanth-ghPosted over 1 year ago

  @basit-flash thank you now came to know about overflow because of you

  0
• 

  Abdallah Aminu Daneji•240

  @waad2lfPosted over 1 year ago

  Nice work👍

  0
• 

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  For your first time, very well done!

  HTML

  • There should be always a main landmark element in your html for semantics reasons
  • Make sure that your image has a clear alt atribute (important!)

  CSS

  • You should have in every project a css reset (look at Andy's Bell website for a clear and good one)
  • Why did you set an empty media querie?

  0