This forum is now read-only. Please use our new forums! Go to forums

0 points
about 10 years

how do you fit a webpage size to fit any screen size

ok i will like to know how do you fit your website size to fit any size because it seems that elements of my website are all around the place whenever i shrink the screen. thanks

Answer 5326c7059c4e9d92e9008b1b

0 votes

Permalink

well, the simple solution would be this: body { padding: 0; margin: 0; } (by defalut there is a margin of i believe 10px, so lets set it zero. now imagine i have a div inside my body: `

`

You can make it full screen using: div { width: 100%; height: 100%; }

this is not very efficient. since when the window is made small the page will become very small, happily we can fix that: div { width: 100%; height: 100%; min-width: 1000px; min-height: 1000px; }

now the div can’t be smaller then 1000px (which is not good news for mobile browser, but we will get back to that later). of course you could use em, em depends on the size of the font-size. so this: div { font-size: 16px; height: 2em; } the height of the the div is now 32px, (2*16) you can make it 16px (1em) or 8px (0.5em)

You can not really answer the question you asked, it is fully dependable of how you design your webpage. but since there are scripts that can tell if you have a mobile browsers you can use px as unit. and make a page for phones as well.

The only thing i can answer is what you see with a lot of webpages: full width but probably set width min-width to prevent shifting elements like you have or they make a central wrapper (just a div) and set it like this: div { height: auto; /*if more info comes on the page, it will stretch down*/ width: 1000px; margin: 0 auto; /*this will cause the div to be in the center*/ }

hopefully this answers some of your questions. If you have any questions, just ask them and i will do my best to answer them. But when visited website, try to figure out (just by thinking about how it could be designed) how it is designed. if you have an idea, take a look in the source code (most websites allow you to view source code) don’t worry about lot’s of thing you don’t know yet, that is just because mostly large websites are maintained by lots of people, to set up your own website you can do it a lot simpler but huge websites can give you useful code you can maybe use. also take a look at http://www.w3schools.com/ great site.

points
Submitted by stetim94
about 10 years

1 comments

thanks a lot for your help buddy

Answer 5327611d9c4e9d7538000177

0 votes

Permalink

if you have any other questions, just post them here (i will reply) If you might have visited my profile you have seen i have own site, if you want to know how to set up your site, i can help you.

points
Submitted by stetim94
about 10 years

1 comments

DavidNg almost 10 years

@stetim your reply has been of help to me as well…But I just wanna ask what would happen if I set my div’s width to auto in the Css editor, will that cause the div to stretch in size if there’s a ‘long’ content coming in? Also do you think it’s advisable to just go all the way with a background div and differentiating it from subsequent ones with an id?

Answer 532f452a7c82caa40e0078d7

0 votes

Permalink

good you ask questions, if you have more questions post them, no problem. You can do auto width but this will just keep stretching and stretching and stretching (infinite stretching) so yes, you can but i recommend you set a max-width. just like you set width: auto; you can add the property max-width: 1000px; for example (you can have both property’s) you can even add a min-width. (min-height and max-height as well of course).

The second question i do not fully understand. I think it is good to make a background-div yes. i also recommend in the start of your stylesheet to start with body { margin: 0; padding:0; }

since by default a margin set of 10px (which you want to control).

you can then add div’s in your central div (which i recommend to set to 100% with a min-width).

hope this answer your questions.

points
Submitted by stetim94
almost 10 years