2

I had recently created a personal site.

I wanted to design such that no matter how low the target resolution would be my site would shrink to fit the whole screen without needing to scroll down. I used % values so that it fits on any target resolution.

Here is the design of the website with all the main properties. site design description

My problem is that when I make the resolution of the browser small, the content doesn't shrink to fit the screen.

This is what happens when I shrink the browser resolution. Boom Why is this happening?

Here are the css properties

#myPageBody
{

    padding: 3% 15% 5% 15%;
}

#myPageNav
{
    text-align: center;
    padding:0%;
    margin-bottom:2%;
    font-weight :bold;
    font-size:150%; 
}

#myPageNav span 
{

    padding-right:2%; 
}

.page
{
    position:fixed;
    width:65%;
    height:70%;
    padding:1%;
    font-size:200%;

}
Cody
  • 2,467
  • 2
  • 21
  • 30
Anirudha
  • 32,393
  • 7
  • 68
  • 89

2 Answers2

1

When you reduce the screen size, the font-size doesn't change, hence it occupies same space as usual and breaks up.

geekman
  • 2,224
  • 13
  • 17
0

When you zoom in or zoom out, the pixels are increasing or decreasing respectively according to their provided percentages.

Try giving max-width , min-width(In pixels) , max-height and min-height(In pixels) properties to them. I may be wrong but this is a good practise.

For Example:

max-width:100%;
min-width:1024px; /* The least resolution to be considered */
max-height:/*desired percentage or pixels */
min-height:800px; /* The least resolution to be considered */
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • i agree but for the sake of animating the page, i cant provide min or max..But can u tell me how to make font change according to browser resolution cuz I think that is the problem as pointed out by @I-love-php – Anirudha Oct 01 '12 at 18:52
  • do you mean keeping it constant though the screen resizes? – Mr_Green Oct 01 '12 at 18:56
  • Not constant..I want the font-size to change with the change in screen resolution – Anirudha Oct 01 '12 at 18:56
  • Then you should go with my solution. I think it will do that thing. try once – Mr_Green Oct 01 '12 at 18:57
  • @Anirudha Hey check this [link](http://stackoverflow.com/q/542576). It suggests to use `em` instead of `px`. – Mr_Green Oct 01 '12 at 19:05