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

General Discussion

Posted by Patrick Sturgill
Patrick Sturgill
3,825 Points

Page shows several responsive page sizes at once

I was looking at other themes for inspiration, and I came across this demo that shows the common sizes all on one page, with one click of a button. Very cool!

Any idea how this was done? I'm guessing they are using a javascript file?

http://demo.mythemeshop.com/responsive/monopoly.html

2 Answers

Derrick Lee
Derrick Lee
7,743 Points
Derrick Lee
Derrick Lee
7,743 Points

Very easy!!!

<div id="frames" class="widthOnly">
    <div id="inner">                                                                                                        
        <div id="f2" class="frame">                                                                                                   
            <h2>320<span> x 480</span> <span class="small">(iPhone)</span> </h2>                   
            <iframe src="http://demo.mythemeshop.com/monopoly" seamless width="320" height="480"></iframe>
        </div>                                                                                                                        
        <div id="f3" class="frame">                                                                                                   
            <h2>480<span> x 640</span> <span class="small">(small tablet)</span> </h2>                   
            <iframe src="http://demo.mythemeshop.com/monopoly" seamless width="480" height="640"></iframe>
        </div>                                                                                                                        
        <div id="f4" class="frame">                                                                                                   
            <h2>768<span> x 1024</span> <span class="small">(iPad - Portrait)</span> </h2>                   
            <iframe src="http://demo.mythemeshop.com/monopoly" seamless width="768" height="1024"></iframe>
        </div>
        <div id="f5" class="frame">
            <h2>1024<span> x 768</span> <span class="small">(iPad - Landscape)</span> </h2>
            <iframe src="http://demo.mythemeshop.com/monopoly" seamless width="1024" height="768"></iframe>
        </div>

        <div id="f6" class="frame">
            <h2>1400<span> x 900</span> <span class="small">(Desktop)</span> </h2>
            <iframe src="http://demo.mythemeshop.com/monopoly" seamless width="1400" height="900"></iframe>
        </div>
    </div>
</div>

If you look at the code above, you should see 5 similarly coded divs. Each division holds a unique id ranging from f2-f6 and each frame is held in a division tag with a class of frame.

That's not the important part, the IDs and Classes are there for CSS purposes. The important part is the iframe.

<iframe src="http://demo.mythemeshop.com/monopoly" seamless width="320" height="480"></iframe>

See the iframe? That's all you need, with the parameters of the width and height of course!

Patrick Sturgill
Patrick Sturgill
3,825 Points
Patrick Sturgill
Patrick Sturgill
3,825 Points

Awesome! Thanks Derrick!