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

mark bernard
mark bernard
1,651 Points
Posted by mark bernard
mark bernard
1,651 Points

Media Query Size mismatch?

Hey, am following the media query examples however my media query sizes are not matching the break point sizes on my web page.

CODE:

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

@media screen and (min-width: 660px) {

body{

background:green;

}

}

the initial navy background does not kickin until around 720px and the second break point seems to be at 990 px. So there is a mismatch between the breakpoints, as specified in my media queries and the breakpoints that actually activate on my webpage. I have looked at the mobile option on Chrome inspect elements as well and am having the same problem. What would be the cause of something like this?

angelyork
angelyork
1,519 Points

I have no idea, but I'm having similar problems. It shows white for the smallest sizes where I would expect blue. As you expand the browser, it switches to blue. Then, at half the monitor and up, it stays with green.