Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML Build a Responsive Website Responsive Design Content Defined Breakpoints

In video, says that at about 650 pixels the 2 column layout is not working. How do you know it's 650 pixels?

i.e. how know it breaks down at 650 pixels, and not some other value like 550?

3 Answers

Devin Gray
Devin Gray
39,261 Points

You can also check your browser's development tools. Like in chrome, you can toggle on device mode and you can adjust your layout to know exactly where it breaks down, and there are rulers on the top and side to help you figure out what pixels the page starts to break down. You can test it out and see for yourself. There are a couple courses on Treehouse that have lessons on the chrome dev tools.

Maja B.
Maja B.
12,984 Points

Hi, In this website there are two breakpoints 480px and 1024px.

First she shows the website at 480px and she is satisfied.

Than she opens it at 1024px and she is also satisfied.

Than she goes down form 1024px and at around (yes, she says around) 650px she is not that satisfied any more. She says that here the design breaks and that some extra work will be needed in the CSS which she opens later.

So yes, it could have been also 550px as you say. The point is that at 1024px it looks great but when she goes down (makes the window smaller and smaller) at first it is still OK but at a r o u n d 650px the styling breaks down - and its true because the two columns are somehow squeezed together and it does not look beautiful any more.

Hope it helps :)

Marilyn Wagner
Marilyn Wagner
6,666 Points

Excellent....thank you Devin. I forgot about device mode. I'll check out the courses, too.