I built the index of my dreams and don't know how to make it scale

[LIQUIDCULT]

https://liquidcult.neocities.org

As the title says this page contains multiple fixed elements that are arranged one by one. I want to be able to scale the entire arrangement depending on browser size and potentially make it mobile friendly WITHOUT rearranging elements but I don't know where to start. Can anyone advise me on this or is my site doomed to desktop only forever?

[Rol]

For something like this, one could use media queries to apply custom CSS, only when the screen is less than say, 800px.

Something like this, purrhaps

Code

.mylink{
  position: relative;
  top: 20px;
  left: 20px;
}

/* If width is less than or equal to 800px */
@media (width <= 800px) {
  .mylink{
    position: static;
  }
}

[LIQUIDCULT]

I'll try this once I get home!

What really gets my goat is that I have a separate page on the site built in a similar manner that scales perfectly on mobile even though theres technically nothing in the code making it so.

https://liquidcult.neocities.org/catshrine/

[LIQUIDCULT]

This unfortunately did not effect the page size the way I hoped it would. Also to the person who suggested switching from px to vw units- here is what doing so results in:

https://liquidcult.neocities.org/vwtester

Passable for certain mobile layouts but ruins the desktop layout. What i have is a very unique problem methinks.

[ribose]

scale the entire arrangement depending on browser size and potentially make it mobile friendly WITHOUT rearranging elements

ooooh my homepage does this! feel free to inspect the code and modify it for your own needs. the basic strategy is putting all the elements i want to scale inside a container that has a set aspect-ratio, a max-height, and a max-width, so it maintains its shape but never overflows vertically or horizontally. on my site, it's the div with the class "room" and it's styled like this:

Code

.room {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  max-height: calc(95dvh - 6rem); /* this is because i want to leave space for the text above the room, which doesn't scale! */
  max-width: 95%;
}

then, everything inside that container gets its size and position defined as percentages of the container's width, so they all scale together as the container gets resized. for example, the clock is styled like this:

Code

element {
  position: absolute;
  top: 7.223%;
  left: 29.688%;
  width: 9.375%;
}

i peeked at your code and it's a similar enough setup that shouldn't take tooooo much effort to convert. you're using margins to position things, while i use absolute positioning, but i think you'd get the same result from using either one. all you need to do is give your .homepage div an aspect ratio, and convert all the pixel values you use for widths and margins into percentages. the full width of your page as it is now is 1920px, so dividing everything by that value should to the trick! so for example, your .nightmode button has:

Code

  width: 126px;
  margin-top: 220px;
  margin-left: 1510px;

converted, it would be:

Code

  width: 6.5625%;
  margin-top: 11.458%;
  margin-left: 78.646%;

let me know if this works for you or if there's anything i can explain better! 

[Rubbereon]

I'll be frank, it's not looking good chief.

I seriously don't know how you pulled that off, but I literally cannot for the life of me figure out how to shrink anything on your page. I put a very explicit "width: 50px" on the body element and then the html element and it got ignored twice! Oh yeah I saw the "max-width: 100vw" on the div, so I reckon you tried to do what ribose suggested with the same result. 

I even tried to mess with things on Ribose's site to see if it was normal and the elements they do resize, so no that's not normal.

If I had to guess why it's like that I'd say it's all the size px styles on all the content doing it.

So yeah you're right on the money in that thread, your website will only ever be accessible to HD screens with fullscreened browsers forever unless you're willing to scrap all your hard work and restart from 0. There's no other way, I just can't see it. _{(thing I hate because on my work desktop my browser is always set to around 720p windowed, and one of my weaker laptops literally only supports 720p resolution, so even if I wanted to I wouldn't be able to use your website)}

Alternatively you could have a separate "mobile friendly" page that gets served instead if somebody's screen is too small, that can be done both in javascript or php, but neocities doesn't support php.

I can only recommend using this to detect if an user is using android or not and then redirect them to the mobile friendly page. That's really your only option right now.

What really gets my goat is that I have a separate page on the site built in a similar manner that scales perfectly on mobile even though theres technically nothing in the code making it so.

I just tried on my own phone and no it doesn't display any better. Even when fully zoomed out it still doesn't cover the entire page and I have to scroll left and right. Nothing gets cut off, that's the only upside compared to the other page.

[ribose]

unless you're willing to scrap all your hard work and restart from 0.

what?? this is simply not true

i'm almost done writing a full solution, give me one moment!

EDIT: here, @LIQUIDCULT, try this out! it's your same code, with pixels converted to percentages:

Code

      <style>
  html,
  body {
  background-image: url("/homepage/bgimage.png");
  background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
  }
  
  .homepage{
	aspect-ratio: 16 / 9;
        max-width: 100vw;
	max-height: 100vh;
  }
  
.iframe {
  width: 26.04%;
  height: auto;
  position:fixed;
  margin-top:41.67%;
  margin-left:46.88%;
    z-index:1
}

.title {
  display:flex;
  width: 52%;
  height: auto;
  position:fixed;
  margin-top:3.9%;
  margin-left:3.39%;
    z-index:20;
}


.title:hover {
  rotate: -1deg;
}

.statictext {
  width: 100%;
  height: auto;
  position: fixed;
  margin-top:3.4%;
  margin-left:0%;
    z-index:16;
}


.blog {
  width: 5.7%;
  height: auto;
  position:fixed;
  margin-top:42.7%;
  margin-left:20.8%;
    z-index:19;
}

.blog:hover {
  rotate: 4deg;
}

.about {
  width: 5.73%;
  height: auto;
  position:fixed;
  margin-top:42.71%;
  margin-left:33.58%;
    z-index:18;
}

.about:hover {
  rotate: -4deg;
}

.guestbook {
  width: 10.41%;
  height: auto;
  position:fixed;
    margin-top:20.31%;
  margin-left:73.95%;
    z-index:17;
}

.guestbook:hover {
  rotate: -4deg;
}

.cookbook {
  width: 9.38%;
  height: auto;
  position:fixed;
  margin-top:32.13%;
  margin-left:71.88%;
    z-index:17;
}

.cookbook:hover {
  rotate: 4deg;
}

.gallery {
  width: 5.73%;
  height: auto;
  position:fixed;
    margin-top:24.48%;
  margin-left:77.6%;
    z-index:17;
}

.gallery:hover {
  rotate: -4deg;
}

.catshrine {
  width: 9.98%;
  height: auto;
  position:fixed;
  margin-top:28.6%;
  margin-left:76.04%;
    z-index:17;
}

.catshrine:hover {
  rotate: 4deg;
}

.busstop {
  width: 8.85%;
  height: auto;
  position:fixed;
  margin-top:41.67%;
  margin-left:58.85%;
    z-index:17;
}

.busstop:hover {
  rotate: 4deg;
}


.escape {
  width: 6.77%;
  height: auto;
  position:fixed;
  margin-top:37.5%;
  margin-left:67.19%;
    z-index:17;
}

.escape:hover {
  rotate: 4deg;
}

.glossary {
  width: 6.25%;
  height: auto;
  position:fixed;
  margin-top: 16.67%;
  margin-left:71.88%;
    z-index:17;
}

.glossary:hover {
  rotate: 4deg;
}

.nightmode {
  width: 6.56%;
  height: auto;
  position:fixed;
  margin-top:11.46%;
  margin-left:78.66%;
  z-index:17;
}

.sun {
  width: 24.32%;
  height: auto;
  position:absolute;
  margin-top:12.14%;
  margin-left:-0.52%;
    z-index:14;
    transform-origin: top center;
    animation: swayvar 3s ease-in-out infinite
}

.moon {
  width: 19.79%;
  height: auto;
  position:absolute;
  margin-top:11.56%;
  margin-left:18.85%;
    z-index:13;
    transform-origin: top center;
    animation: sway 2.5s ease-in-out infinite
}


.cat {
  width: 18.54%;
  height: auto;
  position:absolute;
  margin-top:11.82%;
  margin-left:37.7%;
    z-index:12;
    transform-origin: top center;
    animation: sway 2.5s ease-in-out infinite
}

.star {
  width: 24.27%;
  height: auto;
  position:absolute;
  margin-top:2.34%;
  margin-left:51.56%;
    z-index:11;
    transform-origin: top center;
    animation: swayvar 2.5s ease-in-out infinite
}

@keyframes sway {
    0%,100% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(2deg)
    }
}

@keyframes swayvar {
    0%,100% {
        transform: rotate(0.5deg)
    }

    50% {
        transform: rotate(-1.5deg)
    }
}

  </style>

EDIT 2: i missed one... fixed now!

[LIQUIDCULT]

@ribose OH MY GOD!!! You are amazing!!! Thank you so much for this!! I'm gonna be trying this out with my other pages that have trouble scaling, you truly are a savior I cannot thank you enough!!     

[Melooon]

This is a hacky fix and maybe can work with the others, but for most of my sites I just set a viewport scale in the header. It has no effect on desktop browsers, but will make things smaller on a real mobile browser so the mobile view looks like a tiny desktop.

Code

<meta name="viewport" content="width=device-width, initial-scale=0.35" />

initial-scale=1 would be the normal size you see
initial-scale=0.35 is basically a zoomed out view

[LIQUIDCULT]

With all due respect King Melooon if that worked I wouldn't be asking for help!  As it stands @ribose's solution is doing what I need it to, its just a question of getting the title and background to scale as well.

[Melooon]

if that worked I wouldn't be asking for help!

You might! Not everyone knows about viewport scales (and I don't know what you know!), plus someone might find this thread in the future when they are searching for "how to make it scale" and it could be exactly what they need

[ribose]

@LIQUIDCULT no problem! i'm happy to help

i looked at your site again just now, and when i inspect the title, it still has its width and margins defined in pixels. it took me a minute to figure out how i missed it before, but i see now! the title is styled by your external stylesheet homepage.css instead of the <style> tag on your index page like the others. if you go to that file and swap out those pixel values for percentages, it will scale.

when i was there, i also noticed that homepage.css has some repetitive code for other things like .about and .sun that are getting overwritten by how you've styled .about and .sun in your index page's <style> tag. i recommend keeping all these styles together in one place to reduce the risk of conflicting or confusing code.

for the background... hmmm... i think you have multiple options that will all behave a little differently, so play with it a little! i think the way i would do it is to crop the background image to just the decorative border part, put two copies of the border on the page with <img> tags, then use position:fixed; and width: 100%; to stick them to the top (top: 0;) and bottom (bottom: 0;) of the page, or something like that.