Search code examples
cssresolutionscreen-resolution

Adapting my website to different reslutions


I have been working on this website and it is almost over.. until I discovered my computer is on a high resolution (1920 x 1080px). I tested my website in 1024x768px and it was... not what I expected.

Anyway I searched far and wide around the web and there are still questions that I did not find answers to, so I am here to ask you , hoping to find an answer !

First of all, what I want about my website, is to be comfortable to any screen resolution on computer, from 1024 to 1920. Also, I want it to be comfortable when you reduce the window (you know, like when you make a webpage only cover half the screen).

( English is not my mother tongue so I hope it will still be understandable for you guys.. )

1- I began using px. That does not work on lower resolutions, users have to unzoom. So now I am using % as advised on the web. But now when I reduce my window on the left of my screen, it adapts too, but too much.. I want it to make a horizontal scrollbar appear when you reduce the window too much. SO basically that is my question, what should I do ? I find many websites that work fine (like this one, if you reduce the window a horizontal scrollbar appear !) Maybe combining px and % ? I don't know, I really have no idea what to do.

2- Is the resolution of the screen comparable to the size of the window on a screen ? For example, my resolution is : 1920x1080px If I put my window on the half left of my screen, will be equivalent to a resolution of 1920x5040 px ?

3- For phones and tablets, is it just a question of smaller resolutions ? Or is there something more ?

Thank you so much for helping me on this one ! Cheers, Bill


Solution

    1. First of all, you need to have a container of all your element. Every percentage value is based on it's container. And for scrollbar, may there in your site container have CSS overflow: hidden, so you need to remove it or change it to overflow: auto
    2. I think you meant the content will be shrink horizontally and expand vertically. This is because you don't have any container to wrap each element with percentage width. So you need to have it and set min-width of that container.
    3. For touch device, your site will zoomed out based on how big is your container.