CODEWITHSUNDEEP
csshtml
user1410644
user1410644

Reputation: 351

Make a page and its content smaller

I have a div called wrapper with this CSS:

   .wrapper {
            width: 960px;
            min-height: 720px;
            margin: 0 auto;
            text-align: center;
            background: url(images/bg-light.png) no-repeat;
            padding-top: 20px;
            }

which is located in the body. Body's CSS:

   body { 
        background: #232323 url(images/bg.png) repeat;
        margin: 0;
        padding: 0;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

There are HTML 5 elements which are displayed in block-level. Here is their CSS:

header, nav, article, section, aside, footer, address {  
        display: block;  
        }

I'm trying to make the whole page smaller. I mean like if you click Ctrl/- in your browser. So what's the best way to reduce the size of the page? How to show it as 67%(for instance) of it's size now.

Upvotes: 5

Views: 21351

Answers (4)

frogatto
frogatto

Reputation: 29285

You can use jQuery 2d transform plugin instead, It's safe and cross-browser
just you should write: 

$('your_contents').css("scale",0.5);

Or you can animate your contents by

$('your_contents').animate({"scale":1});

Upvotes: 0

frenchie
frenchie

Reputation: 51927

This sounds like a job for CSS transform:

.SmallerPage{
   -webkit-transform:scale(0.67);
   -moz-transform:scale(0.67);
   -ms-transform:scale(0.67);
   transform:scale(0.67);
   -ms-transform-origin:0 0;
   -webkit-transform-origin:0 0;
   -moz-transform-origin:0 0;
   transform-origin:0 0;}

In this jsFiddle, I use jQuery to add or remove this class to the body:

$(document).ready(function() {

    $('#DoResize').click(function () {

        if ($('html').hasClass('SmallerPage')) {

            $('html').removeClass('SmallerPage');

        } else {

            $('html').addClass('SmallerPage');            
        }
    }); 
});

This will not work in IE8 and under because it doesn't support transforms. If you want to resize the whole page, only transform will do it; otherwise you need CSS switching to make it work in IE8 and under.

Upvotes: 1

iConnor
iConnor

Reputation: 20189

If it is just for the effect of a modal or something, that's the only reason i can think of why you would want to do this.

You can use the non-cross-browser

body{
    -webkit-transform: scale(0.67);
       -moz-transform: scale(0.67);
            transform: scale(0.67);
}

Documentation

Upvotes: 3

Arghya C
Arghya C

Reputation: 10068

Don't set size in px, that makes elements fixed size. You can use %, em etc. Then for the outer div or the whole body, you can set the size you want, maybe px. So, when you change the size of outermost div, all contents will resize automatically.

Upvotes: 0

Related Questions