Web page fit to resolution

Question

I built a new .Net website which will fit nicely on 1200px width resolution. The problem is that some of my users will browse this website with 1024px width. Is there a way to fix this problem quick without changing all the design of the page? For example, to put some javascript that will do the trick. Please keep in mind that the top banner of my site is 1200px wide, and I don't need to support less then 1024px resolution.

Thanks a lot.

Answer 1

It all depends on how 'properly' your web site was designed. You might need to change a few widths for the main containers (hopefully divs) and the whole content will reflow nicely.

However, if your website contains fixed widths for individual elements, or if there are some images / background images with fixed width, then you will have to amend them as well.

Relatively / absolutely positioned elements will need to by amended as well.

There is no silver bullet 'make my page look nice in smaller resolution' , if that's what you're looking for.

Answer 2

You can use the following CSS:

min-width:600px;
max-width:2000px;

this code will set the webpage to all resolutions between 600px to 2000px .

Answer 3

I would use javascript. I'd check user's width with document.width, then use jQuery's css() element to change what's needed.

Answer 4

If you really don't need to support users with horizontal resolutions less than 1200px, then why not just let them have the horizontal scrollbars?

Wrap the whole structure of the site in a (div) container that has a min-width: 1200px and be done with it.

Otherwise, if you can't stomach some users having horizontal scrollbars and you really want to maintain the beauty of the site, then you really need to get out of your way and re-design the site in a way that it gracefully degrades in lower resolutions. It definitely is not easy but it can be beautiful .

Here's an article from alistapart that discusses the techniques involved.