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
Justin Schwartz
3,509 PointsI'm coding a website mobile 1st and am using @media (min-width: ) to make an h1 have a not show but it's not working?
In the css i have it as @media (min-width: 480px) { nav h1 { display: none; visibility: hidden; } } and this does not make the h1 not show at all for some reason. No matter what I try i cant even get the @media css to work at hanging anything.
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Justin,
You have min-width in your title but max-width in your css.
What are you trying to do? Are you trying to hide this element at mobile sizes or beyond mobile sizes?
display:none; is how you would hide it. You don't need visibility: hidden;
Nemanja Pribilovic
5,366 Pointstry with @media screen and (max-width: 480px)
Justin Schwartz
3,509 PointsI need to do (min-with:) and I've tried adding the "screen and" part but it still won't work.
Nemanja Pribilovic
5,366 Pointsfirst of all you should always have your css file loaded last after responsive and normalize.. is this what you want [http://jsfiddle.net/5z7aN/1/]
Jason Anello
Courses Plus Student 94,610 PointsHi Nemanja,
responsive.css should be last. If you put any css after responsive.css which is outside of any media queries then it's just going to override what you have in the media queries.
Justin Schwartz
3,509 PointsYeah thats kinda what I wanted but I was also doing alot of other stuff but the the problem is is when i put all of this @media css on a seperate sheet it doesn't work. SO your saying in the html file to have my main.css after responsive.css and normalize.css?
Justin Schwartz
3,509 PointsJustin Schwartz
3,509 PointsI am trying to hide it beyond mobile sizes and the visibily: hidden isn't the problem. The problem is that the @media it self isn't changing anything no matter what I do. I've tried changing a background color and when I resize my browser nothing happens.
Justin Schwartz
3,509 PointsJustin Schwartz
3,509 PointsWhoops in the forum details i accidentally put the max-width it is supposed to be min-width. Would it be easier if I just created a jsfiddle so you can take a look at my html and css?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYes, that would help.
Justin Schwartz
3,509 PointsJustin Schwartz
3,509 PointsOkay tomorrow I will copy and paste the main CSS and HTML into a jsfiddle and give you the link then hopefully we can figure it out thanks for helping btw.
Justin Schwartz
3,509 PointsJustin Schwartz
3,509 Pointsokay here is a jsfiddle with it: http://jsfiddle.net/Justinms1000/5z7aN/ What I am trying to accomplish is when the window is greater than 480px wide the welcome header is not visible and the navigation goes where the welcome was.
Justin Schwartz
3,509 PointsJustin Schwartz
3,509 Pointsokay I just tried putting the @media css in the same css sheet and it works now... Why would it not work in a seperate sheet?
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsIt sounds like your responsive.css is not being linked properly.
You have a typo in your
<link>element.<link rel="stylesheet" href="css/repsonsive.css">If you didn't spell the file name like that then that would explain that part of it.
You also have the ordering of your stylesheets wrong.
The order should be: normalize.css, google fonts, main.css, responsive.css
I would reorder your stylesheets and also check for typos and then see where you're at.
Justin Schwartz
3,509 PointsJustin Schwartz
3,509 PointsOkay thank you I'll try that!