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
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.
Oh, my bad!
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.
Thanks - I actually hear about this for the first time.
š
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.
Thank you for the suggestions!
I think the best option would be the Tailwind Play, bc I'm working with the same framework.
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.
Ah, OK, but I'm kinda lazy rn - it's almost 10PM here.
š
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.
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.
Just got back in and am looking at this now.
I don't see any scroll. Tested on Chrome and Firefox.
I'm going to send you a screenshot when I use Live Server with VS Code.
And this is how it looks in responsive mode:
OK, I see. You didn't mention anything about responsive mode so my inital comment was based on my first impression.
Interestingly enough, only the first section is affected.
I'm sorry, I should've been more detailed.
I think that there are a couple of issues here.
Fristly, why are you using absolute positioning on the h1?
Because I think it didn't work with margin-top otherwise.
Would you like me to try it that way again?
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.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.
I am not seeing any scroll bars, just he overlap. But removing that code I mentioned resolves that.
Weird - I also removed it but the scrollbar still appears.
Idk what's the problem that occurs when I try it.
š
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
Thank you so much!
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
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?
you shouldn't
use flex/grid alignment
You are using flex so adding some gap should be enough
Oh, OK!
or margin if you prefer
I'll try both and see what's best for me!
Thank you again guys so, so much for your help!
Also make sure you understand why I removed the screen (viewport sizing)
š
Absolutely!
I really appreciate your help and you have a nice ending of the day!
š
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...
OMG, thank youuu!
even if you are using %'s understand how that is working.
ššš
Bye bye!
š