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

Design

Posted by Maximino Cosme
Maximino Cosme
8,355 Points

Responsive Design Help

So i'm trying my hand at responsive design. It isn't hard, really, just time consuming. The most difficult part is knowing when my design breaks. I'll resize the browser window and see a break in the design, but I have to guess at what width that break is happening. Does anyone know of any way to track the width and height of my browser window as I'm resizing it? I've searched plugins for firefox and didn't have any luck, so I wanted to ask if there was a way before I spend more time searching for something that may not exist.

Thank you

8 Answers

Jacob Miranda
Jacob Miranda
19,392 Points
Jacob Miranda
Jacob Miranda
19,392 Points

There is an extension for Chrome if you want to switch over, wink wink nudge nudge. It's called Window Resizer. It was recommended in the Responsive Design Project. I haven't found one for Firefox, but I can dig around in a bit and see if I can find one to share with you.

Lindsey Di Napoli
Lindsey Di Napoli
19,572 Points
Lindsey Di Napoli
Lindsey Di Napoli
19,572 Points

I use Window Resizer as well, but sometimes the break happens at a weird width, like 527px. To determine the exact size I use: http://whatsmy.browsersize.com/ - hope that helps!

Graham Davidson
PLUS
Graham Davidson
Courses Plus Student 14,966 Points
Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Also really worth checking out bootstrap and build using a framework -- has been a life saver for me and responsive projects.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I'm not sure what version you have of firefox but I use firefox on both my Mac and PC on windows 7.

On Firefox for PC click the dropdown button in the upper left, than go to Web Developer >> Responsive Design Tool.

This will allow you to re size your viewport without re-sizing your window. You can quickly select common sizes like Iphone or Ipad size, and it will tell you exactly the pixel size your are on, so you can pinpoint your media queries to the pixel.

On a mac the Web Developer toolbar is hidden under Tools in the top row of menu options.

Firefox doesn't need a plugin to do this, it comes native with the browser. Responsive design tool with Firebug is a thing of beauty.

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

Go to tools>web-developer>responsive design view. I like it better than chromium and it's built right in :) Oh and FireBug is nice and awesome.

Melissa Bornbach
Melissa Bornbach
6,675 Points
Melissa Bornbach
Melissa Bornbach
6,675 Points

With chrome, I can just right click (or control click) any element on the page and I select inspect element in the menu that pops up. Once the developer tools are open at the bottom of the page, I click on the <html> tag inside the left hand panel that shows my html (sometimes I can also click on the <body> tag assuming it takes up a width of 100% of the page). Chrome will show a little popup tooltip telling me the width and height of the the html element or the body element. Since both those elements are usually 100% of the page width for me, I then know the current width of the browser window.

And +1 to the people that mentioned the firefox responsive design view. I think there is also a way to create custom size views in that tool. It is nice. I still like chrome though :0)

Carman A
Carman A
7,672 Points

You can do that with FireFox too, just right click and press Q or click inspect element :)

Carman A
Carman A
7,672 Points
Carman A
Carman A
7,672 Points

And the developer toolbar is nice just click view>>toolbars>>web developer toolbar and then click resize>>view responsive layouts.

Maximino Cosme
Maximino Cosme
8,355 Points
Maximino Cosme
Maximino Cosme
8,355 Points

Wow! Full thread! =D Thank you everyone for your comments. I greatly appreciate them! For the record, I use Firefox when I'm designing and Chrome in Windows 8 mode when surfing the web. =P There isn't really a way to resize the window when in Windows 8 mode, and I'm just a bit too lazy to use Desktop mode. XD

But thank you all for the answers =) I found everything I needed.