qr code page using html and css

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 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:

  1. Remove the margin you have on main for now, and change that to margin: 1rem instead to have a 1rem margin around the card.
  2. On the body selector, remove width and margin, and add min-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.
  3. The final thing I'd suggest is, on main, change width to max-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. On img, change the width to 100%, add object-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
• 

  Jacob Marshall•270

  @JacobMarshall0Posted over 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 using max-width: 100%; and max-height: 100%;. This should stop the image from resizing on it's own.

  0