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
Julian Martinez
3,094 Pointsresponsive.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
Jeffrey Lego
9,458 PointsAdd 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
3,094 PointsI 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
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 :(
Jeffrey Lego
9,458 PointsSo 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.
Jeffrey Lego
9,458 Pointshttp://codepen.io/lego/full/qEYGVG/
This should be what you want to do , if I read your last comment correctly.
Julian Martinez
3,094 PointsI 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 :(
Jeffrey Lego
9,458 Pointsbody { 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?
Jeffrey Lego
9,458 PointsDo you have a meta viewport in your html?
Julian Martinez
3,094 PointsNo No!!! I don't have it, I don't even know what it is!!! :)
Jeffrey Lego
9,458 PointsIt 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
3,094 Points<meta charset="UTF-8"> ???
Jeffrey Lego
9,458 Points<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
Jeffrey Lego
9,458 PointsIt is removing the markup I type into the comment. in your head tags, meta name="viewport" content="width=device-width"
Julian Martinez
3,094 Pointsgreat! 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.
Jeffrey Lego
9,458 PointsI 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
3,094 PointsIt worked it worked!!! thank you!!!
Jeffrey Lego
9,458 PointsI'm goin gto add the final answer to the question - but glad it worked. Taught me something today as well :P
Jeffrey Lego
9,458 PointsJulian 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
3,094 PointsThank you very much Jeffrey!!! If I have any other questions in the future can I go straight to you? :)
Jeffrey Lego
9,458 PointsI 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
3,094 PointsOk Jeffrey, you are completely right! every body wins!!! I will follow your advice! thank you very very much!!!