Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code display using CSS and HTML

@mariahw4

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm excited with how this project went - I feel like I was able to create simple and functional code/css.

I am unsure/questioning if there's a better way to center my box containing the image/content vertically within the page. Until I added some padding this container seemed to just fill the vertical space of the whole browser window.

Thank you!

Community feedback

P
visualdennis 8,375

@visualdenniss

Posted

Hey Mariah,

your solution looks great. I have a suggestion regarding centering. To center your card, instead of paddings: 5%; a better practice would be min-height 100vh, so it stays more consistent with changing browser sizes. E.g.

main { display: grid; place-items: center or your flex-code and ; min-height: 100vh; }

also you can add some min-width to your code to prevent it getting too narrow with resizing.

Hope you find this feedback helpful!

Marked as helpful

1

@mariahw4

Posted

@visualdenniss THANK YOU!! I updated the padding to vh and definitely see the benefit! Also added some min/max width elements so my box doesn't shrink down to such a hard to read size on a smaller window/mobile device!

1

@islamabozeed

Posted

woooooooow, it's awesome, nicely done

0

Please log in to post a comment

Log in with GitHub
Discord logo

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