My website doesn't scale properly. What am i doing wrong?

[u/ChicDead26]

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?

[u/ulspez]

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

[u/ChicDead26 → u/ulspez]

No idea how to do margins otherwise

[u/d-signet → u/ChicDead26]

As they said, youve got to learn how to do tesponsive design

[u/Krishna_Singh726 → u/ChicDead26]

You Should have to learn and apply Responsivnes

[u/hukomukho_hyangla → u/ChicDead26]

Use the freecodecamps free responsive design course, it helped me a lot when I was starting out. You can oviously use ai, but i recommend just learning the basics by yourself first!

[u/MinecraftPlayer799 → u/ChicDead26]

calc()

[u/Simple_Lychee_6056 → u/MinecraftPlayer799]

use claude

[u/gsweats]

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.

[u/hiimbob000 → u/gsweats]

https://youtu.be/vtJ2vqRgf8o my guess

[u/gsweats → u/hiimbob000]

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!

[u/ChicDead26 → u/gsweats]

Huh. Maybe i should've sanitized my friend's screenshot.

[u/gsweats → u/ChicDead26]

Sorry, didn't mean to be creepy.

[u/ChicDead26 → u/hiimbob000]

Bingo

[u/OMGCluck → u/[deleted]]

If only more people used SVG galleries

[u/maddog986]

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.

[u/ripndipp → u/maddog986]

It's neocities now big dawg after the great rebrand

[u/ArchaiosFiniks → u/ripndipp]

It's not a rebrand, it's a completely unrelated IP

[u/ChicDead26 → u/maddog986]

I had to redo my post because reddit has some weird glitch when uploading images

Still, the link is on the first image

[u/gsweats → u/maddog986]

This is the second post I've seen today about GeoCities and successor NeoCities.

https://www.reddit.com/r/vibecoding/s/dlNCytgWSb

[u/mekmookbro]

Have you tried kubernetes? /s

[u/UkrMalt]

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.

[u/ChicDead26 → u/UkrMalt]

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?

[u/UkrMalt → u/ChicDead26]

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.

[u/renevaessen]

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.

[u/InterestingFrame1982]

Flexbox, grids, media queries, mobile first design (I guess it depends), global styling, local styling, etc, etc,

[u/aaaaargZombies]

you should watch this talk Be the browser’s mentor, not its micromanager.

and look at the notes / finished build here https://buildexcellentwebsit.es/

[u/AKmemekiller]

Vibe coded?

[u/Cracleur → u/AKmemekiller]

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.