Forums

chanman

I have a @media query problem when my page resizes to 1100px the navigation disappears but I need the main-content to push up against the left side of the screen with a 15px margin. this is what I have but it doesn't work.

@media (max-width: 1100px){
 article.nav-enclose{display: none;}
 article.main-content{margin-left: 15px;}
 }

mikes02

That's because it is being overwritten, you have your media query placed above article.main-content in the stylesheet, so it's being replaced by the margin-left:250px. Move the media query to the bottom of your stylesheet and that should fix the problem. On a side note, you should really clean up your stylesheet, it's a mess.

chanman

Dose that mean all my media@ queries need to go to the bottom?

joshuanhibbert

Short answer: yes.

mikes02

Media Queries should be at the bottom of the stylesheet so that the declarations are not overwritten. Also, why are you hiding your navigation? The site basically becomes unusable once it's gone, or do you plan to style it differently?

Hompimpa

CSS rules: the last written is preferred.
This text will be red:

span{color:green;}
span{color:red;}

chanman

I plan to style it different here is what I've got so far it changes at 500px. let me know if you like it or not.

springlab

Your full size main text area is way to large. Makes it hard to read on large monitors. Then on the reverse side just before the 500px mark it is way to narrow.

chanman

The full size text area is my next task and I will fix the narrow thing.

treehouse : what would you like to learn today?

Forums

another simple @media query problem