Mobile Responsive design using mediaqueries

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Sunil Tamang, congratulations for your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  1.Your component is okay but its missing the vertical alignment. The best way to do it is by using flexbox. First step is to add min-height: 100vh to make the body height size becomes 100% of the screen height, this way you make sure that whatever the situation the child element (the container) align the body and then use the flex properties for alignment with display: flex / align-items: center; / justify-content: center;

  body {
      display: flex;
      background: hsl(212, 45%, 89%);
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  

  2.Think about using relative units as rem or em instead of px to improve your performance by resizing fonts between different screens and devices.Anyhow, if we want a more accessible website, then we should use rem instead of px. REM does not just apply to font size, but to all sizes as well.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Sunil Tamang•30

  @sunieltmgPosted about 2 years ago

  @correlucas It was helpful. Thanks a lot.

  1
• 

  Adriano•38,330

  @AdrianoEscarabotePosted about 2 years ago

  Hi Sunil Tamang, how are you?

  Welcome to the front-end mentor community I really liked the result of your project, but I have some tips that I think you will like:

  1- Document should have one main landmark, you could have put all the content inside the main tag, this would make your html code better structured! click here

  I noticed that you use a max-width, but to keep the content centered after max-width is enabled, you can do the following:

  section { margin: 0 auto; }

  The rest is great! Hope it helps... 👍

  Marked as helpful

  0
• 

  Sathya D•310

  @satzzzzz07Posted about 2 years ago

  Hey there, Great work on your first solution! Design looks good. There are few suggestions:

  1. Try to add your background color on the body instead of the section, so your background color is applied on all elements of your page.

  2. for width of the section instead of hardcoding values you can use percentages like width:100% which will make the background color flow through entire width of the screen.

  3. You may try font-weight for increasing the weight on headers.

  Aside these, excellent work again and happy coding :) 👍

  Marked as helpful

  0