Solution using CSS Flexbox centered with margin: auto
Design comparison
Solution retrospective
I wonder, is it possible to position the main div in the exact center of the viewport, while keeping the row of text at the bottom of the page?
I don't want to center it using position: absolute, as there are side effects on small screens in landscape mode - elements can overlap, and the top of the main div is hidden and it's not possible to scroll up to see the top. (The second issue happens also when centering with flexbox properties justify-content: center and align-items: center, that's why I didn't use them either.)
Community feedback
- @ZeyadMohamed1805Posted almost 2 years ago
Amazing work right there! 🎇 I see what you want! 🤔 It might be unnecessarily long approach;however, there is a way to implement this:
- Place your attribution inside of the QR Code card
- Set your QR Code Card's position: relative;
- Set your attribution's position: absolute;
- Position it to bottom with a negative value like -50px or other
Keep up the great work there! 🔝 I hope you find this helpful! 😁
0@albina0104Posted almost 2 years ago@ZeyadMohamed1805 thank you! But with this approach the attribution will be below the card, and depending on the screen size may be not at the bottom of the page as I wanted 😁
0
Please log in to post a comment
Log in with GitHub
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