another simple @media query problem

[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?

[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.

[davidlab.be]

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.

[Author]

Posts