Design comparison
Solution retrospective
Had problems with the padding and margin issue; the qr code image kept on reducing in size as I used the padding styling instead of the margin. Then again, using margin made the #main div to move along :(
Community feedback
- @elaineleungPosted about 2 years ago
Hi Canice, welcome to Frontend Mentor and great job in completing your first challenge! I'll see if I can help you out with the positioning here.
Right now because of the huge left margin, the component would continue to be fixed on the left side when you resize the browser. If you're using margin and padding for the purpose of centering the component, flexbox or grid would be the best options on the body, and I see that you already have flexbox there, but you're just needing the final touches! Here's what I'd do:
- Remove the margin you have on
main
for now, and change that tomargin: 1rem
instead to have a 1rem margin around the card. - On the
body
selector, removewidth
andmargin
, and addmin-height: 100vh
. You generally would not want to have a fixed pixel width or height for the body selector, and that's what's making the page not responsive. - The final thing I'd suggest is, on
main
, changewidth
tomax-width: 310px
(by the way, you can really just remove the max-height as it's not doing much), and give it a padding of 1rem. Onimg
, change the width to100%
, addobject-fit: contain
to make sure the image won't be distorted when resized, and finally, remove the fixed height. You should be able to make the card resize itself on smaller screen sizes!
0 - Remove the margin you have on
- @JacobMarshall0Posted about 2 years ago
Hi Canice, good job!
I feel it matches the design quite well. If you would like the card to remain in the middle at all times, maybe try removing the
width:1650px;
.Regarding the image size changing, try placing it in it's own div and declaring height and width on this div, and then use
.class > img
to isolate the image inside the div, and usingmax-width: 100%;
andmax-height: 100%;
. This should stop the image from resizing on it's own.0
Please log in to post a comment
Log in with GitHubJoin 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