Hi guys, I just finished my second challenge. For this one I couldn't center the div vertically using the flebox properties, I don''t know why, so finally I decided to use margin to center it.
Really apreciate your feedback on this.
Nicolas
This looks really good! For the centering issue, try adding min-height: 100vh; in your body styles instead of using margin on your card div, and that should help:)
I tried using a media query, and found changing the size of the QR code based on the screen size a little troublesome. Is there a better way to go at this? Maybe using ems and rems?
I would recommend using the "mobile first" approach for literally every project you ever do. That's what I learned in the classes I took, anyway! It's much easier to progressively increase the size of your layout, than it is to try to fit all your content on a smaller screen if it's designed for desktop.
Instead of putting your mobile styles and measurements in your media query, design everything for the mobile design first, and then use a media query to tweak anything that needs tweaked for desktop.
This is a practice site I did in my class I took when we learned about responsive design, and I think it's a really good example of the mobile-first approach and media query use: https://github.com/Sarah-C-Arvin/Unplugged-retreat
Hope that helps! Keep up the good work!
I'm unsure about class naming, what are the best practices for it?
All your class names look like you're already following best practices! This looks great. Keep up the good work!
