1,105,556 Community Members

how to make our website fit the screen?

Member Avatar
samsons17
Posting Whiz in Training
246 posts since Oct 2009
Reputation Points: -4 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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 :)

Member Avatar
codewall
Junior Poster in Training
80 posts since Dec 2010
Reputation Points: 1 [?]
Q&As Helped to Solve: 12 [?]
Skill Endorsements: 0 [?]
 
0
 

I think try width="100%"

Member Avatar
samsons17
Posting Whiz in Training
246 posts since Oct 2009
Reputation Points: -4 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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...

Member Avatar
codewall
Junior Poster in Training
80 posts since Dec 2010
Reputation Points: 1 [?]
Q&As Helped to Solve: 12 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
webdesignpa
Newbie Poster
2 posts since Dec 2010
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

Please apply CSS Like on Your DIV:

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

It will keep your div fit to your screen

Member Avatar
samsons17
Posting Whiz in Training
246 posts since Oct 2009
Reputation Points: -4 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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 :(

Member Avatar
maryparker
Newbie Poster
10 posts since Jan 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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.

Member Avatar
samsons17
Posting Whiz in Training
246 posts since Oct 2009
Reputation Points: -4 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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 :)

Member Avatar
dmsoul87
Newbie Poster
4 posts since Jan 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
0
 

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?

Member Avatar
winterkleding
Newbie Poster
6 posts since Feb 2011
Reputation Points: 0 [?]
Q&As Helped to Solve: 1 [?]
Skill Endorsements: 0 [?]
 
0
 

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

Member Avatar
drjohn
Posting Pro
526 posts since Mar 2010
Reputation Points: 50 [?]
Q&As Helped to Solve: 106 [?]
Skill Endorsements: 4 [?]
 
0
 

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?

Member Avatar
drjohn
Posting Pro
526 posts since Mar 2010
Reputation Points: 50 [?]
Q&As Helped to Solve: 106 [?]
Skill Endorsements: 4 [?]
 
0
 

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.

You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article