HTML CSS & Responsive design for Iphone SE, note 20 ultra, and desktop
Design comparison
Solution retrospective
Is there a way to automatically set the margin on the top and bottom for a piece of content to center vertically for any device?
I attempted this but it just moved the QR card to the top of the screen.
Something new I learned was responsive web design. I used the in-browser tools to show a preview of an Iphone and Note 20 ultra. I centered the QR card on the y-axis specifically for each device however, when testing on my phone I forgot to consider additional space that is taken up by the phone and browser interface.
Community feedback
- @DavidMorgadePosted over 2 years ago
Hello and welcome to the community, congrats on your first challenge!
There is a bit of a trick yo center this kind of components challenge, instead of using
margins
you can remove them and use flexbox directly on the parent element wich is the body, for this you need to set up themin-height: 100vh
to your body, you could do something like this after removing the margins:body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
It will remain a scroll bar but this can be remove with a style reseter or simple defining all the elements to margin 0 from the start like this:
* { margin: 0 }
.With this is should look good on your phone too!
Hope my feedback helped you! Good job and keep going!
Marked as helpful2@AvielDezPosted over 2 years ago@DavidMorgade Thank you for the fast response! This worked perfectly. I'll definitely investigate this code further for future use.
1
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