this scrolling won't stop.
i'm trying to make a personal site. as you can see in video the scrolling won't stop. but in figma image this is not the case i tried giving position absolute but it made it worse. i have this codepen where you can see the whole code. https://codepen.io/samgon/pen/LYvBbrY
25 Replies
image is from figma and video is an preview of the current code. and the code i started it from mobile first css
@That's what she said! I've made a few adjustments and this should now work more or less the way you were looking for. Essentially the
height: 100vh was causing most of the issues as this was being applied to the sibling instead of body. Another change I made was to make this non-absolute positioned and swapped to a vertical writing mode. A few adjustments are needed, likely, but that should get you started.Updated pen: https://codepen.io/badg0003/pen/poBZRGz?editors=1100
Also, I should add if you want to avoid a vertical scrollbar on smaller devices, you could always switch your font size to use viewport units
You should avoid using viewport units for font sizes, it doesn't account for user preferences and accessories.
https://youtu.be/wARbgs5Fmuw?si=hfdNLnbPwDqg_ez9
Kevin Powell
YouTube
Simple solutions to responsive typography
In this one, I look at two simple ways to make maintaining your site's typography much simpler!
🔗 Links
✅ The codepen: https://codepen.io/kevinpowell/pen/MWoYgrN
✅ More videos on responsive layouts: https://youtube.com/playlist?list=PL4-IK0AVhVjM6kuUoUexfmnD8vHtZkXdd
✅ My free course on responsive layouts: https://courses.kevinpowell.co/con...
thank you it did work
the issue is that i don't know what is happening if i gave margin-top -5% or any other value instagram logo moves to up side and when i give margin-bottom: 2.5rem; it doesn't work
https://codepen.io/samgon/pen/LYvBbrY
updated codepen
i noticed one thing that when i use justify content: center; it doesn't center horizentally as it should
i have to give margin-right for it to center properly
updated codepen again!!
i tried fixing horizontal and vertical scroll but it's just going way above my head.
also give me review if i'm doing it right or not ?
the issue.
True, although so long as you have the proper 'guardrails' in place via
clamp , min, etc, there isn't a problem. Plus in this case, we're talking about a logo/wordmark so not exactly a deal-breaker if its a bit smaller on some displays.Makes sense, mb
@That's what she said! Gotta be honest I feel you're kinda overcomplicating this with the extra "Berry" and "Coming soon". You already have "Berry" presented on the page, vertically and you have a title that conveys the message that this content/site is coming soon, so I'm not sure why you feel you need to repeat both elements.
Here's an updated/simplified version: https://codepen.io/badg0003/pen/QWPBOXX?editors=1100
It’s a design. You’ll like the full design.
Let me check that out
Haha gotcha - all good 🙂
what changes have you done i'm so confused now
i can design better but i don't come html and css side often so i get this kinds of issues
@That's what she said! I simplified the layout a bit - header, container and footer. Note my version has the elements that I thought were "extra" removed, so those would need to be added back if you choose to use them.
If you are from a design background you may have an easier time using a tool like Webflow which more or less allows you to design w/o having to worry so much about the underlying CSS.
Html and css is free
But i will check that out too.
Is there any issue with code ?
Where did i went wrong? I didn’t understand.
I suggest you do a side-by-side compare of your pen and mine.
ok let me try that
https://codepen.io/samgon/pen/LYvBbrY UPDATED PEN
@WebDev can you review it ?
design is completed but it wasn't aligning so i kinda left it.
can you just review and let me know what attributes should i use. and i'm super confused with width and height why is it automatically runs in width and height.
it should look like this.
UPDATE ::::
This is how it looks like in mobile
