3-Column Car Preview Card using HTML and CSS Grid

Community feedback

• 

  Josh•1,110

  @josh76543210Posted over 1 year ago

  Hello @newtothis90,

  Congratulations on completing the challenge!

  I have a recommendation for you to improve your code:

  Try to avoid using absolute positioning to center your main content. What happens, is that when someone views your site on a smaller screen that person will not see all of your content. This is because absolute positioning positions your content in a fixed spot no matter what the size of the screen is.

  Steps to change your code:

  1. Remove the absolute positioning for the container (don't forget the media query):

  .container {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  @media only screen and (max-width: 900px)
    .container {
      transform: translate(-50%,-25%);
    }
  }
  

  2. Add an alternative method of centering your content. Two great ways of doing this are css grid and flexbox. Here is how to can do it using css grid:

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

  The min-height is there to tell your body to use the entire height of the page unless the content exceeds it. In that case the user can scroll to view the other content.

  Well done! You have now improved the look of your page while making your code more efficient and readable. I hope this was helpful for you!

  Marked as helpful

  1

  ---

  

  newtothis90•240

  @newtothis90Posted over 1 year ago

  @josh76543210

  Thank you so much, it makes complete sense what you are saying. I'll make those changes immediately and keep them in mind.

  0