Fixed the scaling/dimensions issue, with the help of a few tutorials and W3Schools guides. I did some of the code on my laptop, that wasn’t logging hackatime so it was definitely longer than half an hour, but I don’t know what exactly, and I don’t really mind missing an hour or so.

But to fix it. the thinga I did was: I replaced all position: absolute; and instead used flex boxs and css grids, as I had been previously using hardcoded pixel offsets and negative margins so stuff overlapped and just looked horrible once the window changed dimensions. I also built flexible containers, just again to fix the distorted shapes on larger windows, . I also then replaced hardcoded pixel heights with flex 1, because without there were empty gaps when on a larger window. Aside from that I then added aspect ratios on media (like the component card photos) so the photos maintained nice, clean porportions.

So now everything is nicely aligned, finally ! But I think I still need to do some work on making it look a little better on larger scaled, however at least everything is scaling properly.

( I’ve linked a few photos showing before and afters )