Responsive grid layout chalange solution

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • It seems like the issue you're facing isn't related to typography but more about how you've centered and set the height for the component. Your current CSS for the container is causing it to overflow.

    The height you've set is making the solution behave strangely, particularly on smaller screens, and the percentage-based width can also distort the layout on larger screens, you can remove it.

    .container {
        /* position: absolute; */ /* Eliminate this way of centering, in the next point I will explain why. */
        /* top: 50%; */
        /* left: 50%; */
        /* transform: translate(-50%, -50%); */
        /* width: 80%; */
        /* height: 80%; */
        max-width: 1000px;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 40% 30% 30%;
    }
    
    @media only screen and (min-width: 1440px) {
      .container {
        /* width: 45%; */
        /* height: 60%; */
        grid-template-columns: 50% 50%;
        grid-template-rows: 45% 55%;
      }
    }
    

  • Avoid using position: absolute to center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here 📘.

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

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  adrnmatos•150

  @adrnmatosPosted about 1 year ago

  @MelvinAguilar Hi. Thank you for the your reply. I had tested and it works much better.

  0