Sections overlapping and a bottom scrollbar appears (Tailwind CSS)

Hello, guys! So I'm building a portfolio using Tailwind CSS and I have a main element (where all the content will be) and I added two div's that have flex-col (added in the main element). However, when I add it, it seems like the div's (or should I say - the sections) are somehow ovelapping and a bottom scrollbar appears. Can someone help me, please - I've been stuck on this for 20 mins already! GitHub link: https://github.com/GeorgeDash/personal-portfolio
GitHub
GitHub - GeorgeDash/personal-portfolio
Contribute to GeorgeDash/personal-portfolio development by creating an account on GitHub.
38 Replies
Chris Bolson
Chris Bolsonā€¢2mo ago
You are more likely to get help if you show the site working somewhere. It is unlikely that anyone is going to look through all your code in GitHub to find the issue.
GeorgeDash
GeorgeDashOPā€¢2mo ago
Oh, my bad!
b1mind
b1mindā€¢2mo ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
GeorgeDash
GeorgeDashOPā€¢2mo ago
Thanks - I actually hear about this for the first time. šŸ˜­
b1mind
b1mindā€¢2mo ago
There is also https://codepen.io/ and if you need something more complex https://stackblitz.com/ is great
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
StackBlitz | Instant Dev Environments | Click. Code. Done.
StackBlitz is the collaborative browser-based IDE for web developers. StackBlitz eliminates time-consuming local configuration and lets developers spend more time building.
GeorgeDash
GeorgeDashOPā€¢2mo ago
Thank you for the suggestions! I think the best option would be the Tailwind Play, bc I'm working with the same framework.
b1mind
b1mindā€¢2mo ago
All of them support you using TW but not wrong it might be the easiest to just paste your html in that is why I linked it first šŸ˜„ You can preset codepens to load Tailwind by default when you make a new pen if I'm not mistaken too though.
GeorgeDash
GeorgeDashOPā€¢2mo ago
Ah, OK, but I'm kinda lazy rn - it's almost 10PM here. šŸ˜…
GeorgeDash
GeorgeDashOPā€¢2mo ago
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
GeorgeDash
GeorgeDashOPā€¢2mo ago
There you go! Some things didn't apply, but the only thing that really matters are the sections themselves. @Chris? I'm REALLY sorry to ping you, but would you mind taking a look at my problem? I jsut forgot how to silent ping.
Chris Bolson
Chris Bolsonā€¢2mo ago
Just got back in and am looking at this now. I don't see any scroll. Tested on Chrome and Firefox.
GeorgeDash
GeorgeDashOPā€¢2mo ago
I'm going to send you a screenshot when I use Live Server with VS Code.
GeorgeDash
GeorgeDashOPā€¢2mo ago
No description
GeorgeDash
GeorgeDashOPā€¢2mo ago
And this is how it looks in responsive mode:
GeorgeDash
GeorgeDashOPā€¢2mo ago
Chris Bolson
Chris Bolsonā€¢2mo ago
OK, I see. You didn't mention anything about responsive mode so my inital comment was based on my first impression.
GeorgeDash
GeorgeDashOPā€¢2mo ago
Interestingly enough, only the first section is affected. I'm sorry, I should've been more detailed.
Chris Bolson
Chris Bolsonā€¢2mo ago
I think that there are a couple of issues here. Fristly, why are you using absolute positioning on the h1?
GeorgeDash
GeorgeDashOPā€¢2mo ago
Because I think it didn't work with margin-top otherwise. Would you like me to try it that way again?
Chris Bolson
Chris Bolsonā€¢2mo ago
The difference between the first one and the second one is that the first one has pr-[calc(100vh-100%)] That is a strange calculation as you appear to be setting a padding right based on 100% of the viewport height - 100% of the section itself. I am not sure what you are trying to do there.
GeorgeDash
GeorgeDashOPā€¢2mo ago
I was trying some solutions on the internet. When I tried it in Tailwind Play, it was working fine in responsive. But still - in browser is showing the scrollbar. Nvm - it still has the scrolling in responsive.
Chris Bolson
Chris Bolsonā€¢2mo ago
I am not seeing any scroll bars, just he overlap. But removing that code I mentioned resolves that.
GeorgeDash
GeorgeDashOPā€¢2mo ago
Weird - I also removed it but the scrollbar still appears. Idk what's the problem that occurs when I try it. šŸ˜­
b1mind
b1mindā€¢2mo ago
I just removed all the absolute stuff (besides nav where it made sense) and all the screen stuff sorry that was your link https://play.tailwindcss.com/lMzluPC6MO
GeorgeDash
GeorgeDashOPā€¢2mo ago
Thank you so much!
b1mind
b1mindā€¢2mo ago
You should really avoid positioning with absolute, use flex and really you should learn grid for this kinda stuff and not rely on flex col
GeorgeDash
GeorgeDashOPā€¢2mo ago
OK, I'll make sure I do! Thanks again so much! šŸ˜Š And I have one last question - if I really want to still position the h1 where I wanted it, should I use relative instead of absolute position?
b1mind
b1mindā€¢2mo ago
you shouldn't use flex/grid alignment
Chris Bolson
Chris Bolsonā€¢2mo ago
You are using flex so adding some gap should be enough
GeorgeDash
GeorgeDashOPā€¢2mo ago
Oh, OK!
Chris Bolson
Chris Bolsonā€¢2mo ago
or margin if you prefer
GeorgeDash
GeorgeDashOPā€¢2mo ago
I'll try both and see what's best for me! Thank you again guys so, so much for your help!
b1mind
b1mindā€¢2mo ago
Also make sure you understand why I removed the screen (viewport sizing) šŸ˜„
GeorgeDash
GeorgeDashOPā€¢2mo ago
Absolutely! I really appreciate your help and you have a nice ending of the day! šŸ˜
b1mind
b1mindā€¢2mo ago
Kevin Powell
YouTube
The problems with viewport units
Conquering Responsive Layouts (free course): https://courses.kevinpowell.co/conquering-responsive-layouts Join the Discord: https://kevinpowell.co/discord Viewport units often feel like this cheat code that makes things so much easier when you first discover them, but they actually are problematic for a number of reasons, from creating horizon...
GeorgeDash
GeorgeDashOPā€¢2mo ago
OMG, thank youuu!
b1mind
b1mindā€¢2mo ago
even if you are using %'s understand how that is working.
GeorgeDash
GeorgeDashOPā€¢2mo ago
šŸ˜ŠšŸ˜ŠšŸ˜Š Bye bye! šŸŒ™
Want results from more Discord servers?
Add your server