Flexbox + breackpoint at 375px

I use Microsoft Power Toys. It includes a tool called Screen Ruler, which is incredibly useful for measuring design images. Additionally it offers a wide range of other handy features, such as Color Picker, Text Grab and a lot more. My favourite tool since you can use it on any program, unlike chrome or other browsers where you have to install a bunch of extensions.

I have a few suggestions on how you can improve the solution and make it responsive. As it currently is it only looks good at large screen widths.

First thing I would do is add height: 100%; to both the html and body tags. This ensures that the site takes up the full height of the screen and gets rid of a lot of potential issues.

Second, an easier way to center the card is to add the following to the body:

    display: flex;
    align-items: center;
    justify-content: center;

and then remove the following from the section:

     margin: auto; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%,-50%);

Replace width: 20%; with something like max-width: 375px;. On small screens the card is really narrow. Read up on how to use clamp() here. It's one way to handle responsiveness.

Hi @CeB-old!

I use a browser extension called Perfect Pixel. It's a very useful tool.