This forum is now read-only. Please use our new forums at discuss.codecademy.com.

371 points
531ba51a282ae35b81002f2f_751571764
Submitted by
ernielg_53149fe0548c35c8bb00ac6c_del
almost 5 years ago

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


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:
<body>
<div>
</div>
</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.

3009 points
5ac0e923961bae76e60003bf_9638442
Submitted by
stetim94
almost 5 years ago

1 Comment

531ba51a282ae35b81002f2f_751571764 ernielg_53149fe0548c35c8bb00ac6c_del almost 5 years ago

thanks a lot for your help buddy


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.

3009 points
5ac0e923961bae76e60003bf_9638442
Submitted by
stetim94
almost 5 years ago

1 Comment

738dabc8032099e05dadd88b0f4ee0d5?s=140&d=retro DavidNg almost 5 years ago

@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?


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.

3009 points
5ac0e923961bae76e60003bf_9638442
Submitted by
stetim94
almost 5 years ago