This is a really nice solution!
The only issues I see are
- the attribution is overlapping the content. There really is no good reason to use position fixed on that, it can only cause bugs.
- the component is touching screen edges at the top and bottom. Add some margin on the component or add some padding on a wrapping element.
Good job though!
@jasoneczek
Posted
Thank you @grace-snow. I will fix those issues and repost.
@jasoneczek
Posted
I removed the fixed position on the footer and added 1rem top and bottom margin to the card. I experimented with giving the main element flex grow 1 in order to push the footer down. But then I had to make the main element a flex container as well in order to re-center the card vertically. In the end I thought that was unnecessary coding for something not really important, and the attribute links look fine below the card. In devtools, the height of my card at 375px is 578.82px, and in the Figma file it is 579. At desktop screens my card height maxes out at 610.82, and in Figma it is 611. I'm hoping the margin I added to the card fixes the screen touching issue on shorter screens. For me it is not even close to the edges on my phone screen, but I have a larger phone size.
@jasoneczek this looks great, well done!
To test smaller phone height you can always view in landscape mode on a phone.
@jasoneczek
Posted
@grace-snow thank you for checking my fixes. I appreciate it.