so, for

L.U.C.A.'s profile i'm recreating [link=https://i.pinimg.com/originals/3b/ea/36/3bea36583c7bd749313dcccf1f4514ba.jpg]this[/link] particular depiction of the evolutionary tree of life. i know there's probably not an EASY way to do this but i'm wondering if i'm on the right track so far by just doing this with divs and borders, or if i'm making this undertaking way more complicated than it should be? [link=https://pastebin.com/FQVVy6GB]here's[/link] my code so far.

i'm also concerned about the size of this thing (specifically the width.. i'm fine with people having to scroll vertically, but not horizontally). ideally it'd be great to have it scale based on window size but i haven't been able to find a good way to do that. i'm considering just shrinking the whole page a bit w/ transform:scale so it naturally fits on most windows, but that's not a very elegant solution... i think that may be my only hope, however, outside of rewriting all my code which i REALLY don't want to do...

gahh, idk, does anyone have any opinions? am i good??

wow! impressive!

This will be huge and complicated no matter how you do it. Unfortunately my suggestion would be to start over from scratch - something you don't want to do and I can understand that. I would make a page size image - of a tree or something, then as you mouseover the tree branches, images open up. The programming would be more complex than what you are already doing, but it would make the thing fit on one screen.

Hopefully someone can come up with something simpler for you - this is the only thing I can think of.

hmm the only thing i can think of would be to use flexbox to have the divs scale with page width, but i don't think it would be able to maintain the correct proportions so that doesn't seem like a realistic option. then again i barely know anything about that sort of stuff. is the resident flexbox expert!

even though this is gorgeous and super cool, it is pretty wide. the only thing i can think to do is just squish stuff a little closer together horizontally, ideally until your max width is ~1000px - but of course, that would require adjusting the values of pretty much everything on the page. it also might not even be possible to do so without having stuff too close/overlapping, so resizing might be your best option.

thank you both for your thoughts! part of me really likes the idea of using an image instead, but another very stubborn part of me wants to keep doing this with entirely CSS/HTML since i've already started with that :P and yeah, i was looking at stuff about flexbox, but i'll admit that it went over my head a bit at first glance, lol; and like you said, idk if it would keep the proportions.

and man, yeah, unfortunately this may only get even wider when i make more progress on it... hmm, well, unless someone can confirm that flexbox would be able to do what i need it to, i think i will just go for resizing the whole page. i don't have too much of a problem with that, really... just wanted to make sure it wasn't, like, a stupidly simple route to go down when there might be other options, lmao :P

whatever you end up deciding, i look forward to seeing the finished product!