Responsive QR code using flexbox

Hi, Daniel Ayala! 👋

Congratulations on finishing your first Frontend Mentor challenge! 🎉

Regarding your question, there are two common approaches when it comes to creating a responsive website (or writing the styling). First, is the desktop-first approach which means you are writing the initial styling for the desktop screen size first and then using media queries to style smaller screen sizes such as tablet and mobile. Second, is the mobile-first approach which means you are writing the initial styling for the mobile screen size first and then using media queries to style larger screen sizes.

The easiest way (and the best way) to write your CSS is doing the mobile-first approach. It often leads to shorter and better performance code. Also, mobile users won't be required to process all of the desktop styles.

But in this case, you don't need any media queries to make the site responsive. 😉

In general, you want to avoid using px because it doesn't respect the user's font size setting. So, rem unit would be the better choice than using px.

For viewport units,

• Never use 100vw on anything as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
• In this case, you want to make the body element as the flex container to center the card in the middle of the page. You need to make sure that the body element has a height in order to make the card vertically centered. So, I recommend setting a min-height: 100vh to make sure that the body element always fill the entire page while still allowing it to grow if ever needed (e.g. on mobile landscape view).

Lastly, I strongly recommend fixing all the issues that have been reported. 😉

That's it! I hope this helps. 😊

Happy coding! 😄

Hi @dan-ayalahdez,

here's a guide on units you might find helpful. It explains both all absolute and relative units. In short, they are handy, when there is a linear proportionality between two values (eg. em: relative to font-size, vw: relative to viewport-width, etc.) They are a very powerful tool in responsive design, especially when combined with CSS math functions.

Keep up the good work! :)