HTML, CSS, media query, Mobile first - workflow

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello there 👋. Good job on completing the challenge !

  • There are some options to create space with position: absolute, such as using a pseudo-element with a specific height and position: absolute, or wrapping your .box element in another div and adding padding to that new div. However, these solutions tend to add more lines to your code. Therefore, modern layout techniques like display: flex or grid can be a cleaner and more effective way to achieve the same result.

    For instance, you can apply display: flex or grid to the body element. Then you can simply add a margin to create space between the QR code element and the bottom of the container.

  • Also, since you want to eliminate the previous position: absolute styles, you can simply remove the following lines from your .box class: transform: translate(50%, -50%);, position: absolute;, top: 50%; and right: 50%;

    body {
        background-color: hsl(219, 60%, 83%);
        text-align: center;
    
        margin: 0; /* Add this to remove the default margin from the body*/
        min-height: 100vh;
        display: grid;
        place-content: center;
    }
    
    .box {
        /* transform: translate(50%, -50%); */
        /* position: absolute; */
        /* top: 50%; */
        /* right: 50%; */
        margin: 15px;
        max-width: 320px;
        background-color: white;
        border-radius: 15px;
    }
    
    @media screen and (max-height: 400px) {
      .box {
          /* margin-top: 10%; */
      }
    }
    

  • PD: A suggestion of using the ::after pseudo-element to create the desired spacing would look something like this:

    .box::after {
        content: "";
        height: 15px;
        width: 1px;
        display: block;
    }
    

    But with flexbox or grid, you can achieve the same result with fewer lines of code and better maintainability.

  I hope you find it useful! 😄

  Happy coding!

  0