Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Nick Wilson
Nick Wilson
5,060 Points
Posted by Nick Wilson
Nick Wilson
5,060 Points

Scaling with jquery/javascript

I've asked this question before but, i have more code this time and I need some help... so i'm building this website and I have to have the content scale evenly such as if the content itself is an image. So i have this code that i'm using which is...

    var base = {};
    base.width = 1400;
    base.element = $(".section").get(0);

    var width = $(base.element).outerWidth();
    var scale = width / base.width;

    $(window).resize(function(e) {
        scale = $(base.element).outerWidth() / base.width;

        $(".section").css("transform", "scale(" + scale + ")");
    });

and i have each section in a div as if it is its own content such as ....

<div class="section">
content
</div>
<div class="section">
content
</div>

What's happening is that when i am scaling down the page, the sections are breaking apart away from each other...If however I replace the class "section" with the "body" or "html" element it will not split up the content BUT it will however create huge margins/padding around my content.

Please view the website that i'm making here...

https://women-in-it.alivetek.training/