CODEWITHSUNDEEP
htmlcss
Anirudha
Anirudha

Reputation: 32807

why doesn't the website shrink to the target resolution

I had recently created a [personal site][1].

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][2]

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][3] 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%;

}

Upvotes: 2

Views: 514

Answers (2)

Mr_Green
Mr_Green

Reputation: 41842

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 */

Upvotes: 0

geekman
geekman

Reputation: 2244

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

Upvotes: 1

Related Questions