CODEWITHSUNDEEP
html
user3400389
user3400389

Reputation: 367

Adjust screen size on different browsers

Facts:

  1. My website was created in 1024 x 768 pixels resolution.

  2. It's OK to view my site in the same screen resolution.

My Problem:

  1. It is not Okay to view my site in a 800 x 600 resolution having screen.

is there any perfect or best way to solve this issue ? Any help would be nice.

Upvotes: 0

Views: 395

Answers (4)

Xtian
Xtian

Reputation: 498

Your problem could be the way on how you coded it. Here are some possible scenarios:

1.) Your length and width position could be in absolute or fixed. E.g.

#container position: absolute/*of fixed*/;

2.) The type of metric used for measurement are pixels rather than percentages (%). There is a big difference between these two:

#container Height: 100px;

and

#container Height: 20%;

3.)You might be using deprecated features from the old html versions or your browser does not support new features. Try adding modernizr.js. This add-on will support your website into old browsers

It is best if you use CSS3 Media Queries to optimize your website to your desired sizes. This can also be used to support your website into mobile browsers.

Upvotes: 1

Jaykumar Patel
Jaykumar Patel

Reputation: 27614

I recommended to you set your <body> style like this way,

body {
    font-size: 13px;                                   /* As per your style */
    font-weight: normal;                               /* As per your style */
    font-family: 'Droid Sans', Arial, Verdana, Tahoma; /* As per your style */
    text-align: left;
    background: #FFF;   
    overflow:auto;
    background:scroll;
    width:1007px;
    max-width:1007px;
    min-width:1007px;
    margin:0 auto;
}

This is best fit to all screen size resolution. if you use 800x600 size its come scroll-bar both side, if lasge size 1366x768 show in middle both size margin auto.

Demo site you check this is best fit website. This page is look like newspaper type page.

You can check ctrl + + (Increase), ctrl + - (Decrease) and ctrl + 0 (Normal Size).

Upvotes: 0

B.K.
B.K.

Reputation: 10152

You shouldn't use absolute sizes if you don't user to have different experiences based on their resolutions. Use relative sizes on your components.

Liquid design mimiks what I suggest: http://www.htmlbasictutor.ca/flexible-liquid-design.htm & http://www.maxdesign.com.au/articles/liquid/

... and there's also Elastic design: http://alistapart.com/article/elastic

Upvotes: 0

Veera
Veera

Reputation: 33182

What you are looking for is CSS media queries, using which you can modify the layout of your sites based on screen resolutions / available width.

Upvotes: 0

Related Questions