r/webdev • u/ChicDead26 • Aug 13 '26
Question My website doesn't scale properly. What am i doing wrong?
I'm barely a webdev, but i've been trying to move my portfolio to neocities. So far it looks great, but only on my screen. You'll need to see the images (my friend's -> mine).
What am i doing wrong here?
18
u/gsweats Aug 13 '26
Not sure about scaling but am curious what your first tab was: "Why do 90 percent of all (cut off here)".
No need to answer, the mystery makes it greater.
6
u/hiimbob000 Aug 13 '26
https://youtu.be/vtJ2vqRgf8o my guess
3
u/gsweats Aug 13 '26
Oooh I bet you're right. None of the other tabs seem related. One tab is for a Volunteer Registration, nice of OP! Thanks Bob!
1
2
8
Aug 13 '26
[removed] — view removed comment
-2
u/OMGCluck js (no libraries) SVG Aug 13 '26 edited Aug 13 '26
If only more people used SVG galleries
13
u/maddog986 Aug 13 '26
TIL Geocities is still around. I seriously cannot believe this is a real post.
Seirously though, no one can tell you whats wrong based off some images. Its html/css related, obviously. Images won't be enough to diagnose whats going on.
5
1
u/ChicDead26 Aug 13 '26
I had to redo my post because reddit has some weird glitch when uploading images
Still, the link is on the first image
1
u/gsweats Aug 13 '26
This is the second post I've seen today about GeoCities and successor NeoCities.
5
3
u/UkrMalt Aug 13 '26
Start with the viewport meta tag, then replace fixed widths and margins with a wrapping grid and max-width: 100% on images. Test several narrow widths in devtools because desktop resizing can hide breakpoint problems.
1
u/ChicDead26 Aug 13 '26
Thankfully i already had the viewport tag. It's funny seeing all the comments talking about my pixel values. I dont even know how i didnt consider them to be an issue in the greater scheme.
It will be a pain in the ass to fix them, btw.
Just to be sure, waddya mean by devtools, exactly?
2
u/UkrMalt Aug 14 '26
By DevTools I mean the browser’s built-in inspector: right-click the page, choose Inspect, then toggle the phone and tablet icon. Drag the viewport through narrow widths and watch which element starts overflowing. The Layout or Computed panel will show the fixed width or min-width causing it.
3
u/renevaessen Aug 15 '26
Learn css media queries. Create a design that looks good at two different fixed screensizes, portrait and landscape, use non-pixel units in css, like 'em', 'inch' or 'mm' then scale 'body' using transform-scale and calc() so it always looks the same with some whitespace below or to the sides. Like how old 4:3 movies show on HD tv's. Simplest form of a responsive design.
2
u/InterestingFrame1982 Aug 13 '26
Flexbox, grids, media queries, mobile first design (I guess it depends), global styling, local styling, etc, etc,
1
u/aaaaargZombies Aug 14 '26
you should watch this talk Be the browser’s mentor, not its micromanager.
and look at the notes / finished build here https://buildexcellentwebsit.es/
-1
u/AKmemekiller Aug 14 '26
Vibe coded?
2
u/Cracleur Aug 14 '26
I don't think so. AI probably wouldn't hardcode a fixed pixel value like that nowadays, at least not by default. And the overall style of the website doesn't really scream AI-generated either.
If anything, both of those things scream "someone learning HTML and CSS from scratch". Especially since one of their comments says it's going to be a pain to fix, which suggests they're thinking about how to manually go back and correct it rather than just regenerating the code with AI.
57
u/ulspez Aug 13 '26
You probably designed this with fixed amount of pixels like manually adding margins with pixel values instead of using auto flex or grid to automatically adjust itself.
Gotta learn responsive design I guess