This is my very first submission for Frontend Mentor. This is the QR Code Component challenge. Any feedback is welcome.
There is one area I was unsure of: I created a card and placed and centered the QR Code image inside the card, with some padding. Initially, on smaller screen sizes, the image would get off center (i.e., the padding was greater on one side). However, I managed to find a solution to this by adding media queries, and now, the QR Code image looks centered on the different screen sizes.
Still, I am unsure if the media queries approach I used to solve this was the best way to deal with this. I imagine there may be another way that would be a better approach, but right now, this is what I am unsure about. If anyone has another way of how I could have approached this, I would be happy to hear it. And of course, any other comments are welcome. Thank you!
Have you tried using flexbox to align the items in the card? The media query approach you used utilizes a lot of different paddings, and using padding as your primary means of aligning and laying out items can get a bit difficult as you've probably encountered here.
Using properties that are more suited to layout, like flexbox or grid, can help. For example, in my solution for this same challenge, I used these properties on my div containing all the items on the component:
From there, all I needed to do was adjust the top/bottom margins of the elements within the card to get them in the right position.
You can see that code in my solution here: https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H/hub/qr-code-component-using-css-flexbox-2chPVWJdcF
