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

Julian Martinez
Julian Martinez
3,094 Points

responsive.css completely overriding main.css

On my smart phone which is a samsung galaxy s mini, the background is dark green which is the colour applied on the responsive.css for resolutions after 660px. I am lost.

11 Answers

Add meta viewport tag and change queries:

body { background:white;}

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

@media all and (min-width:660px) { body {background-color:green;}}

Julian Martinez
Julian Martinez
3,094 Points

I did exactly as you told me to, max-width: 480px but now the navy colour has completely disappear, on the video with Nick Pettit the idea is that:

until 480px the background is white from 480px to 660px the background is navy anything after 660px turns dark green

Thank you so much for your time!

Julian Martinez
Julian Martinez
3,094 Points

:( Jeffrey I can see that your code changes from red to green, but I actually need is to be able to make my main.css kick into the small screen. The change between navy and dark green is fine, my problem is when I check the website on my phone...I am sorry I keep wasting your time :(

So I have you backwards, you want anything bigger than 480px to be navy, bigger than 660px to be green, and anything smaller than 480px to be whatever is in your main css. In that case, media only screen and (min-width:480px) { css } media only screen and (min-width:660px) {css}, add the media 'only' into your media queries.

I'm sorry, I thought the colors were not changing correctly as the device got smaller for some reason.

http://codepen.io/lego/full/qEYGVG/

This should be what you want to do , if I read your last comment correctly.

Julian Martinez
Julian Martinez
3,094 Points

I did again exactly as you told me, I added 'only' into my media queries but nothing happen, the screen on my phone is still green :(

body { background:red;}

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

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

I tested this code on my htc 1 device and the screens background color was read. Compare it with your code?

Do you have a meta viewport in your html?

Julian Martinez
Julian Martinez
3,094 Points

No No!!! I don't have it, I don't even know what it is!!! :)

It may or may not work, but I have read it can cause undesired results not to have it. Add this in your <head> tags <meta name="viewport" content="width=device-width">

Julian Martinez
Julian Martinez
3,094 Points

<meta charset="UTF-8"> ???

<pre> in your <head> tags, <meta name="viewport" content="width=device-width"></pre>

check this website: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

It is removing the markup I type into the comment. in your head tags, meta name="viewport" content="width=device-width"

Julian Martinez
Julian Martinez
3,094 Points

great! I added the meta viewport just after my meta charset and the background in my phone turned white :) but the background on my mac turn white too which means I lost the colour changing with the resolutions.

I don't have a mac with me, so I can't test... you can try:

body { background:red;}

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

@media all and (min-width:660px) { body {background-color:green;}}

Julian Martinez
Julian Martinez
3,094 Points

It worked it worked!!! thank you!!!

I'm goin gto add the final answer to the question - but glad it worked. Taught me something today as well :P

Julian Martinez check out this video, it covers everything we just did it may give you a better understanding https://teamtreehouse.com/library/css-foundations/media-queries/devicespecific-media-queries-part-1

thanks!

Julian Martinez
Julian Martinez
3,094 Points

Thank you very much Jeffrey!!! If I have any other questions in the future can I go straight to you? :)

I don't mind, but it may benefit you better to still post on the forums in-case I am not available and it also helps others that are having the same problem, benefits Team Tree House if it is posted on the forum etc.

Julian Martinez
Julian Martinez
3,094 Points

Ok Jeffrey, you are completely right! every body wins!!! I will follow your advice! thank you very very much!!!