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

Laura Hill
Laura Hill
13,674 Points

Media Queries: should they be based on screen sizes or breakpoints?

Hello, My site looks awful on my iPhone 6. I checked it in Browserstack and it looks awful in most mobile formats. Im using Dreamweaver and it has several views for mobile screen sizes. It looks great on those.
Im thinking the problem is that screen sizes are too numerous these days and I need to use different media queries. Is there a way to design a site to change at whatever point the site breaks? If so, any tips or resources you can recommend? A "responsive" site can adapt - not have tons of code for a million media query "what if" scenarios - am I right?

2 Answers

Kevin Korte
Kevin Korte
28,149 Points

Yeah, first suggestion is to ditch Dreamweaver as soon as possible. At least the "magic" that Dreamweaver has. It's fine as just a text editor, but you want to stay away from any other features it has. So it's a very expensive text editor at that. (I use to use dreamweaver, so I'm speaking from experience.)

Breakpoints should happen where the site breaks, instead of screen sizes. Screen sizes change too fast to have media queries set on them. The best solution I have found so far is to use fluid types of units. This is a lot of percentages, ems, and rems if you need them. Let the layout fluidly adapt. When elements start to break down, use a media query to fix it. This should cut down on a lot of media queries used.

It may also help to design the site to be a stacked mobile layout without media queries, and than use media queries to achieve the layout you want as the screen size expands.

Sass has a lot of great solutions to make working with media queries less painful if you're not already using it.

Andrew Shook
Andrew Shook
31,709 Points

This answer gets a plus 1 just for recommending the discontinued use of Dreamweaver,

Laura Hill
Laura Hill
13,674 Points

If I took the advice to discontinue using Dreamweaver it would save me $75 a month! But then how would I get Photoshop? I have been using the photoshop-Dreamweaver-typekit triumvirate for a while now. I like how Dreamweaver connects to my host and any changes I make in Dreamweaver are updated to the live site. What else does this? I agree though, What good is Dreamweaver if what I create there doesn't render the same way in browsers? Its been a time waster correcting flaws I didnt even know were there. Whats better? Should I try Bootstrap and or Foundation(s?)? Im using rems and percentages. But, in media queries I just have to add them all in again so the text isnt microscopic on mobile devices... Im learning Sass. I get it, I am just not used to it. So many learning curves slow down progress... Thanks for your comments. One more question, "Where the site breaks" is inconsistent if I am going by pixel width in Google dev tools. Id like the site to look pretty much the same on tablets and desktops. Is resizing my browser window the SAME THING as testing different viewport sizes? Thanks again.

Aaron Martin
Aaron Martin
1,855 Points

You can get Photoshop on it's own for $20 a month.

As for a text editor that connects to your server, Espresso from macrabbit is what I use. http://macrabbit.com/espresso/