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

CSS How to Make a Website Responsive Web Design and Testing Adding Breakpoints for Devices

Posted by Daniel Matar
Daniel Matar
858 Points

Adobe Dreamweaver

Hi there,

I've been using Adobe Dreamweaver as my editor during this course. But for some reason when I drag the window back and forth, I don't see the background colors change in the responsive layout.

@media screen and (min-width: 480px) { body { background: nazy; } }

@media screen and (min-width: 660px) { body { background: darkgreen; } }

Daniel Matar
Daniel Matar
858 Points

It's okay, it's working now. Just realized that I spelt navy wrong :)

thomascawthorn
thomascawthorn
22,986 Points

Are you using the live preview? Watch out on that, more often than not it doesn't render the page as it would look in a browser ;) try a local server (like MAMP on mac or WAMP on windows) and run through a browser.

Max Bailey
Max Bailey
8,245 Points
Max Bailey
Max Bailey
8,245 Points

Good job solving your own problem!

I agree with Thomas Cawthorn. Either use a local server, or if you're just working with static HTML files, load that page in a browser. Adobe Dreamweaver teaches many bad habits (I used it for ~1 year while learning web development, years ago). I would suggest Sublime Text. It's a highly extensible text editor, that's super light. It keeps you focused on writing great code, instead of using the live preview.

thomascawthorn
thomascawthorn
22,986 Points

hey hey hey hey hey... Who said anything about bad habits :-p I use Dreamweaver as my text editor ;) If you have the Adobe CC, Edge Code is also worth taking a look at. It's pretty much a lite version of Sublime Text.

1 Answer

Dave Berning
Dave Berning
17,365 Points
Dave Berning
Dave Berning
17,365 Points

Just like others said, watch out for Dreamweaver's "design view." Dreamweaver's design view tries to be a browser but fails miserably. I always troubleshoot my code using a real web browser. Dreamweaver is also very cluttered with features (yes you can make a new 'workspace') that you simply don't need. There can easily be 10 different ways to do the same thing in Dreamweaver.

I don't even use Dreamweaver anymore, I use Sublime Text. Sublime has a simple clean interface and has useful features like selections and editing several lines at once, and vertical highlighting. Plus, it's free!