Design comparison
Solution retrospective
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!
Community feedback
- @b-capraPosted about 2 years ago
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:
div { display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
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
Hope this helps!
0@answebdevPosted about 2 years ago@b-capra Thank you for your feedback, Brett. Flexbox was what I tried first, and I wasn't able to get it that way. And you are right about the media query approach and how using padding the way I did can get tricky, which was indeed the case. I will take a look at the properties you used and your suggestions and see if I can get it to work that way. Thanks again!
0 - Account deleted
the width looks like too much, and too little height compared to the original.
0@answebdevPosted about 2 years ago@kailDeb13 Thank you for pointing that out. I just noticed that too. I am new to Frontend Mentor, and this is my first submission, so I am still figuring things out. So I was wondering, how am I supposed to know what the height and width are supposed to be? I looked in the style-guide.md file that came with the starter code, but I don't see anything that says what the height and width should be. Thank you.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord