How to change the size of (even part of) the content on a page

Add the class post-single-content-inner to the elements you want to zoom in/out. I did it by creating a 600px wrapper div and putting a div with the class post-single-content-inner inside it.
Always set the width of the post-single-content-inner class to 100%:
CSS
```
.post-single-content-inner { width: 100% !important; }
```

Create buttons for controlling the size on the page:

XHTML

<div class="text-size">
    <a href="#" id="decfont">A-</a>
    <a href="#" id="defaultfont">A</a>
    <a href="#" id="incfont">A+</a>
</div>

Add this JavaScript:

jQuery('#incfont').click(function () {
        jQuery('.post-single-content-inner').css('zoom', 1.2);
        return false;
    });
jQuery('#decfont').click(function () {
        jQuery('.post-single-content-inner').css('zoom', 0.8);
        return false;
    });
jQuery('#defaultfont').click(function () {
        jQuery('.post-single-content-inner').css('zoom', 1);
        return false;
    });

Leave a Reply Cancel reply