Static QR Page Challenge Solution

What are some best practices when using @media for different displays?

• When it comes to best practices, most people like to go for Mobile-First Approach. Where the initial CSS Styling is done for Mobile UI & then you use media-query to change the UI for Larger Screens.
• Secondly, the way in which you should use media-query is that once at lest one UI Styling is done (Desktop or Mobile). You use Browser Dev tool to adjust the screen size, & observe the Size at which the UI starts to break (Overflow, Font looks too large, etc.).
• Right now if we look at your solution, you are changing the Styles at 1440px, even though around 740-800px there is enough screen left around that you can adjust the size & make the Card a bit larger.

For text size is it more common to use px values or use relative units such as em/rem?

• It's more common & best practice to use em & rem.
• Using Relative units, we get the advantage that we can adjust the font in one shot using media-query & root instead of setting it for every element separately

@media screen and (min-width: 1040px)
{ 
  html {
    fontsize: 0.75rem;
  } 
}

• You'll notice that even for readjusting the Font, I've used rem the reason is that it provides advantage in terms of User Experience. If some user sets a different default font-size using their browser setting using rem we will be basically respecting that & building on top of it. whereas if you were to set px values, the user's preferences are of no use.

using pixels is not a best practice dear, rather use rem or em units. when using media queries always decrease the font size of HTML when moving from a large screen to a smaller screen.

@media(max-width:1024px){ html{ fontsize:62.5%; } }

@media(max-width:768px){ html{ fontsize:55%; } }

@media(max-width:549px){ html{ fontsize:50%; } }

This way the root font size will get decreased when the viewport hits these breakpoints, the breakpoints i used in above code are for example only.