News Homepage

Community feedback

• 

  Ambe Mbong-Nwi Nchang•550

  @Ambe-Mbong-NwiPosted almost 2 years ago

  Hello, great job here.

  • Firstly, in my opinion, it is way easier to style this page using either CSS grid or CSS flexbox or even both. Because using them gives you defined areas within which each component fits properly.

  Check out the links: CSS grid and CSS flexbox to get a better understanding.

  • Secondly, the page appears to be displayed on the left. To centralize it, you can input the following command:

  Using flexbox:

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

  Using grid:

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

  • Lastly, media queries help you to define different style rules for different device widths like phones and laptops.

  Example: max-width changes the background color to blue if the viewport is 375 pixels wide or smaller

  @media (max-width: 375px){
      body{
      background-color: blue;
    }
  }
  

  min-width changes the background color to lightgreen if the viewport is 376 pixels wide or wider

  @media (min-width: 376px){
      body{
      background-color: lightgreen;
    }
  }
  

  So for mobile styles, include a media query with max-width 375px(mobile width) so you can then define your mobile styles below. See more information using this link @media rule in our CSS reference

  Marked as helpful

  0