Design comparison
Solution retrospective
Is there an alternative approach, other than utilising position: fixed;, to maintain the footer at the bottom of the page while simultaneously ensuring that the QR component remains vertically centered within the viewport?
Community feedback
- @ewlondonPosted 9 months ago
In this instance, your main and div elements could be contained within a wrapper/container to solve this issue, allowing you to use grid to force their positions.
article{ display: grid; grid-template-rows: 1fr auto; place-items: center; min-height: 100vh; }
<article> <main> </main> <div class="attribution"> </div> </article>
This would eliminate the need for a position fixed on your footer attribution.
Marked as helpful0 - @aswinbhaskaranPosted 9 months ago
@meillee According to me, there is another way to implement it, but I am open to better options from others too.
You can use about two
display:flex
s. The outer one can probably havejustify-content:space-between;flex-direction:column
while the inner one can probably havealign-items:center
. If there is enough space and it is also your preference, you can also addalign-content:center
, but you would need to addflex-wrap:wrap
for it to work.This might make it look like the footer is at the bottom of the screen, while the QR code part is at the center of the screen. But the problem is width and height. While the width might not be as much a big problem, the height would be, considering different devices have different screen height.
0 - @Bishalsnghd07Posted 9 months ago
Hi Mei Lee
Fantastic work🎉
One suggestion from my side, never ever give height and width on a body, it only break your layout. So, my suggestion is to give min-height instead of height you used in body. In smaller project this is negligible but, when you work with larger project in future, then the layout will break if you use
body { background-color: hsl(212, 45%, 89%); height: 100%;(use min-height: 100vh) font-family: "Outfit", sans-serif; justify-content: center; align-items: center; padding: 1rem; }
And one more thing about using footer: Using footer fixed to bottom that is good practice, no need to change it
0@ewlondonPosted 9 months ago@Bishalsnghd07 I agree no reason to change, fixed footers are very common.
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