HELP: adjusting site elements for different resolutions

andou
Casual Poster ⚓︎

i stinky
⛺︎ My Room
StatusCafe: andou

Artifacts:

HELP: adjusting site elements for different resolutions

« on: a Summer day »

i am very new to making websites. mine is basically held together with glue and tape. lots of googling and looking at other peoples websites is how i made mine. i sort of... HALF understand a lot of things. the code is a MESS. if you use view page source on this page you'll see what i mean.

that said, i was wondering if a very kind and patient soul could help me with what i'm sure is a simple fix!

when you view my site on 1920 x 1080, as designed, it looks like this:

however, it looks like this on my ultra wide monitor:

and like this if you make the window small:

how do i make it so everything adjusts on its own for other resolutions? i'm sure this is a simple fix - i just wasn't sure what to google!


	Logged

https://andou.gay/assets/andou%20illustrations/andouwindow.png

CLICK HERE TO TELEPORT
TO THE ANDOU ZONE

urgellx
Full Member ⚓︎

Lost on the web
⛺︎ My Room

Artifacts:

Re: HELP: adjusting site elements for different resolutions

« Reply #1 on: a Summer day »

Hello, quick reply to show you this parameter in the "style" portion of the html header :

@media all and (min-width:200px) and (max-width: 1000px) {
anything you want to adjust for min width 200 and max width 1000
}

Hope this helps. It's a bit of a hack but it works.

You can also use "somethingvw" as a width, to adapt depending on the size of the screen.


	Logged

Héhé, écoute, derrière y'avait pas mal de vent.

Melooon
Hero Member ⚓︎

So many stars!
⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games
RSS:

Guild Memberships:

Artifacts:

Re: HELP: adjusting site elements for different resolutions

« Reply #2 on: a Summer day »

I don't have an easy fix for you but I can explain whats going wrong!

You've positioned your two content boxes relative the edge of your browser; so as the browser size changes your boxes will move with the edge of the window - sometimes too big, sometimes too small

Traditionally; Id describe your site design as a "float" site; since your using two floating boxes. This is a pretty well established design style, but it can also be reallllyyy a head wrecker for new web crafters (it was for me).

The best suggestion I can offer is to put everything in a wrapper div, then give that div a fixed width; and make it "position; relative" - that way your inner boxes will be relative to the wrapper box size, not your browser window size.

Loose example:

Code

<body>
<div id="wrappper" style="width: 1000px; margin: auto; position: relative;">
  YOUR OLD CODE GOES HERE
</div>
</body>

There are also other ways to create grids and boxes on sites; but this is the most classic that will give you the style your going for. Click those links and read up a bit on it; you can figure it out!


	Logged

everything lost will be recovered, when you drift into the arms of the undiscovered

Artifact Swap:

andou
Casual Poster ⚓︎

i stinky
⛺︎ My Room
StatusCafe: andou

Artifacts:

Re: HELP: adjusting site elements for different resolutions

« Reply #3 on: a Summer day »

Quote from: Melooon on a Summer day

I don't have an easy fix for you but I can explain whats going wrong!

You've positioned your two content boxes relative the edge of your browser; so as the browser size changes your boxes will move with the edge of the window - sometimes too big, sometimes too small

oh god, my website is like a hydra. i fix one problem and three more pop up in its place

this has helped me a lot figuring out where i need to troubleshoot and adjust things! i think with a little bit of fooling around i'll be able to get it fixed! thank you so much!


	Logged

CLICK HERE TO TELEPORT
TO THE ANDOU ZONE

starbreaker
Hero Member ⚓︎

What good is Heaven if we dare not storm it?
⛺︎ My Room
StatusCafe: starbreaker
RSS:

Artifacts:

Re: HELP: adjusting site elements for different resolutions

« Reply #4 on: a Summer day »

CSS Grid might be a good way to fix your layout and make it usable across multiple devices.

This little game might help teach the basics. https://cssgridgarden.com/

A guide to learning CSS grid: https://learncssgrid.com/

CSS Tricks' complete guide to CSS grid: https://css-tricks.com/snippets/css/complete-guide-grid/


	Logged

as all kingdoms fall, let my will be done on earth, and heaven be damned

Pages: [1]

« previous next »