How to make all screen resolutions to work?

HTML & CSS
1

I have a website http://www.yourdollarhost.com and the entire website douse not load correctly in screen resolution 1152 x 864 or smaller. Everything overlaps eachother whats an easy fix to this issue?

Thanks

2

Start reading up on Responsive Web Design. It may take a little time to learn, but it’s definitely the direction to want to go.

3

Blame all your fixed widths.

You also are using old tags like <center> and <font>. Those are obsolete as well.

Look into responsive design. That’s the only layout method that should be used.

4

I only took a quick look, but you seem to have a lot of elements with position:absolute. Add that to the above, and I don’t think there is an “easy fix”.

6

Something to think about while your looking into responsive design is the use of %'s.

Rather than using:

width: 876px;

Use something like:

width: 100%;
max-width: 876px;

This will retain it’s size @ 876px wide but will also shirk to fit the page if it doesn’t fit. This could be applied to your #outer div.

7

I want the page width to be 876px. Is there a way to make the 876px width slide/work into a horizontal scroll bar because I want to have the horizontal scroll bar working when they try to minimize the page? So the horizontal scroll bar will show instead of moving everything over.

Thanks

8

What you want is irrelevant - it is what your visitors want that is important. If your visitor wants 200px width and you don’t give it to them then they will go to someone who does.

2 Likes