how to make our website fit the screen?

[samsons17]

Hi,i've designed a website.
It seems okay on my laptop screen.

But when i try to open it on the larger screen or on the smaller screen,the width of my website does not longer fit the screen's width.

Why is this happen?do i need to always use "%" for the width instead of "px"?
thanks for helping :)

[codewall]

I think try width="100%"

[samsons17]

okay, could write the width in %,but only for the body background,or footer background,but how about it seems that it is not reasonable to use it for the content between the footer and the header.Okay,i dont know how to really explaining it,so this is my site that i try to work with :

http://www.ryzalyusoff.com

Try to open that site in the different sizes of screen,and hopefully you could help me then :D

Thank You...

[codewall]

for me your website is nice, I viewed it in 1920x1080 resolution and I think it is not good when you follow this resolution. stay in that width.

[webdesignpa]

Please apply CSS Like on Your DIV:

.DIV
{
margin-left:0px;
margin-right:0px;
}

It will keep your div fit to your screen

[samsons17]

Please apply CSS Like on Your DIV:

.DIV
{
margin-left:0px;
margin-right:0px;
}

It will keep your div fit to your screen

I dont know,but it does not work for me :(

[maryparker]

There are no snippets of code or special settings that allow your images to stay the same size, relative to the screen (without making your images look really bad.) You just have to design your website to look good on any screen resolution, even though it will look different on some screens. Most people set their screen resolutions at 640x480. That's why you'll see white space on the right of your screen when you're viewing a Netscape Search Page with 800x600 resolution or higher. Many commercial sites solve the problem by putting ta able on the left and set the width at 600 pixels. Doing this, their page will perfectly fit on a 640x480 screen.

[samsons17]

There are no snippets of code or special settings that allow your images to stay the same size, relative to the screen (without making your images look really bad.) You just have to design your website to look good on any screen resolution, even though it will look different on some screens. Most people set their screen resolutions at 640x480. That's why you'll see white space on the right of your screen when you're viewing a Netscape Search Page with 800x600 resolution or higher. Many commercial sites solve the problem by putting ta able on the left and set the width at 600 pixels. Doing this, their page will perfectly fit on a 640x480 screen.

Hi,sorry for a late reply..But could you show me some example on this?what are the snippets of code or setting that you really mean?you said that some of the commercial website putting the table on left?em for example if i want to design a page like facebook where the contents keep align on the center,how could i achieve that without any of screen resolution problem?
I need to really know this subject matter because i am plannig of design a commercial site soon..

Thanks for your time :)

[dmsoul87]

I'm sort of dealing with the same issue however I'm using Dreamweaver to make my page, the issue is that when I look at the page on different machines they each look a little bit different, is there not a way to set it so that the web page detects the screen resolution upon opening, to show up correctly?

[winterkleding]

It looks good to me, although it opens kinda slow from the Netherlands.

[drjohn]

Where on earth do you get this total rubbish from??

Most people set their screen resolutions at 640x480.

Are you someone from 1995 who has accidentally been timewarped to 2011? Someone who has met Doctor Who and left the Tardis by accident?

[drjohn]

It is a BAD idea to make your web site as wide as the viewer's screen. It makes reading text tricky - when the reader gets to the end of a long line of text, they have to sweep their eye back along it and drop down one line to find the next new line. This gets trickier the wider the screen or browser viewport to be more accurate.

So choose a sensible width for your content, say 1000px or so, and use a wrapper div to centre the entire content (not text-align: center; of course as that is even harder to read!)

So if you want a magic snippet of code, try this.

<body>
<div id="wrapper">

The rest of your page is in here

</div>
</body>

Next, include this in your css
body { margin:0; padding:0}
#wrapper {width:1000px; margin:auto;}

Without seeing your site, I've just used 1000px as an example. Perhaps your site is a little bit wider than that, or a little bit narrower. But please remember that many people do NOT work with their browser fully maximised - the main reason to have a wide screen is so that several apps can be open and visible at the same time. For example, working from a word doc a client sent with the content/text for a new web site, you'd have the word doc open next to your web editor, which avoids jumping back and forth between two documents both set at full screen. Or browsing the web with your email client open next to the browser. Ditto word processing with email visible, etc, etc, etc

Whatever you do, don't work with your web design app at full screen, as we don't all have a monitor exactly the same size as yours, and even among those who do have that same monitor, they don't all sit with their browser maximised. Create a site that looks okay on the majority of people's screens, not on the single commonest screen size.

[kantmaniji]

If you are using bootstrap then use fluid container and row. it will work fit 100%

[megbaru]

I think zoom to100

[spy_1]

use bootstrap and set sceen on sm-md-lg....website screen will show prpoerly