@elaineleung
Posted
Hi Kostas, great job building this using Next.js 😊
As far as I can tell on the Next.js front, everything looks great in your app and in your code; I looked through the files and didn't notice anything strangely out of place. I'm not familiar with Tailwind's classes, but in any case, the only comment I have is, in your CSS you can try separating your normalize/reset rules instead of lumping them together with the body and html, and what's normally used as normalize/reset for both would have at least the height or min-height property. I'd also only have styles on the body and not combine it with html.
In any case, right now when I shrink the height of the browser, the contents are covered by the browser window, and you'd also see the background disappearing at the bottom with the black coming through; the footer also is pushed up into the card. I had a look at your TW classes, and I think this may have something to do with the flex centering properties you have in the child div of your main. I'd try removing them, and then put them elsewhere, like the main. I also think having the background on this div is causing the black to bleed through.
Anyway, great job on the whole! 🙂
Marked as helpful
@KostasKv
Posted
@elaineleung Hi Elaine, thanks for the in-depth response, I really appreciate it!
I'm glad you've pointed out the issue with shrinking the browser vertically. That wasn't something I was ever checking before and now I know to look for it.
I've figured out the issue and fixed it. Just simply had to add a large enough min-height to main. The problem was that the child div for the component had a fixed height while its parent, main, took on the screen height (100vh). This would cause the div to spill out from main when the screen height was too small, causing all the weirdness.
I don't know much about normalising/resetting in CSS yet so I'll read up on it, cheers for bringing it up. Everything in that CSS file (except for font) was the default from using Create Next App, so I just left it as is.
Thanks again :)
@elaineleung
Posted
@KostasKv No problem Kostas, it looks great right now 🙂
Yes, I did see the h-screen class you had on the child and thought about mentioning min-height, but I also thought you'd probably figure it out in the end anyway, and glad you did!
