Responsive page with media query

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 2 years ago

  Hi @Glorit74 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

  I like this solution for the challenge. Here are a few suggestions I've made that you can consider in the future if you're looking to improve the solution further:

  • Centering the element with position would make your element behave strangely on some mobile devices. There are two modern CSS techniques to center elements instead of using the position property.

  Using flexbox layout:

  body {
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  

  Using grid layout:

  body {
     width: 100%;
     min-height: 100vh;
     display: grid;
     place-content: center;
  }
  

  Additionally, remove the position properties:

  main {
      /* position: absolute; */
      /* top: 50%; */
      /* left: 50%; */
      /* transform: translate(-50%, -50%); */
     . . .
  }
  

  Links with more information:

  • The Complete Guide to Centering in CSS.
  • A Complete Guide to Flexbox (CSS-Tricks).
  • How TO - Center Elements Vertically (W3Schools).
  • CSS Layout - Horizontal & Vertical Align (W3Schools).

  .

  • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

  I hope those tips will help you.

  Good job, and happy coding!

  Marked as helpful

  1
• 

  Flóra•180

  @Glorit74Posted about 2 years ago

  Hi Malvin!

  Thank you for your comments and links (I didn't know the first one). I had tried flex on body, but it didn't work. Maybe because I left out the width and height..., it makes sense. I checked it. You don't need the width, it works without it, you only need the height.

  15px was part of the task in style-guide.md.

  0