HELP: adjusting site elements for different resolutions

andou
Casual Poster ⚓︎

i stinky

StatusCafe: andou

HELP: adjusting site elements for different resolutions

« on: August 15, 2023 @672.00 »

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

CLICK HERE TO TELEPORT
TO THE ANDOU ZONE

urgellx
Jr. Member ⚓︎

Lost on the web

Re: HELP: adjusting site elements for different resolutions

« Reply #1 on: August 15, 2023 @675.41 »

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!

SpaceHey: Friend Me!
StatusCafe: melon
iMood:

Itch.io: My Games

Re: HELP: adjusting site elements for different resolutions

« Reply #2 on: August 15, 2023 @687.75 »

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

andou
Casual Poster ⚓︎

i stinky

StatusCafe: andou

Re: HELP: adjusting site elements for different resolutions

« Reply #3 on: August 15, 2023 @703.46 »

Quote from: Melooon on August 15, 2023 @687.75

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
Sr. Member ⚓︎

is it any wonder that my mind's on fire?

SpaceHey: Friend Me!

Re: HELP: adjusting site elements for different resolutions

« Reply #4 on: August 15, 2023 @761.55 »

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

rock operatic science fantasy and more...
(...all opinions mine unless attributed, and free to a good home...)

Pages: [1]

« previous next »

Vaguely similar topics! (3)