Responsive QR Code Page

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have only one suggestion about your code that might interest you.

  • You can use the following styles to center the element effectively using either of these two methods and remove the overflow: hidden in the element: For Grid:

    #backdrop {
        background-color: #d6e2f0;
        /* height: 100vh; */
        /* margin: 0 auto; */
        /* overflow: hidden; */
        /* width: 100%; */
        display: grid;
        place-content: center;
        min-height: 100vh;
    }
    

    For Flexbox:

    #backdrop {
        background-color: #d6e2f0;
        /* height: 100vh; */
        /* margin: 0 auto; */
        /* overflow: hidden; */
        /* width: 100%; */
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    

    Later, you can remove this margin:

    #card{
      /*     /* margin: 175px auto; */
    }
    

  I hope you find it useful! 😄

  Happy coding

  Marked as helpful

  2

  ---

  

  rkendall300•240

  @rkendall300Posted 11 months ago

  @MelvinAguilar Thank you for the suggestion! This looks way cleaner, so I will definitely swap over to using this kind of method for backdrops in future projects.

  0