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

Posted by Martin Mihailovski
Martin Mihailovski
5,646 Points

Media Query don't work on browser

I have problem with media query, it work here on TreeHouse workspace, but i try to debug it with google chrome and it doesn't work.

I have uploaded it online - www.mmi-design.com/demo/mmi

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Martin Mihailovski | Front-End Developer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <header> <a href="#home" id="logo"> <h1>Martin Mihailovski</h1> <h2>Front-End Developer</h2> </a> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section class="home" id="home"> <img src="img/martin.jpg" alt="Martin picture"> <h1 class="head-main"><span id="hi">Hi,</span> I'm <u>Martin Mihailovski</u>! This is my portfolio where I share all of my favourite work.<br> I create <strong>usable</strong> and <strong>responsive</strong> designs.<br></h1> </section> <section class="workflow"> <img src="img/responsive-design.png" alt="Responsive design"> <p>Every single design is responsive and unique template</p> </section> <hr> <section class="workflow"> <img src="img/clean-design.png" alt="Clean design"> <p>I make creative & clean designs</p> </section> <hr> <section class="workflow"> <img src="img/online-support.png" alt="Support"> <p>1 year online customer support</p> </section> </div> <footer> <a href=""><img src="img/facebook.png" alt="Facebook"></a> <a href=""><img src="img/twitter.png" alt="Twitter"></a> <p>© 2016 - Martin Mihailovski.</p> </footer>

</body>
</html>

I have no idea why it doesn't work. Help?

2 Answers

Mark Truitt
Mark Truitt
17,230 Points

Hi Martin,

I assume you are referring to http://www.mmi-design.com/demo/mmi/css/responsive.css not working? If so, the problem is there is no code there. 

@media screen and (min-width: 480px) {

/******************************
EXAMPLE FOR COMMENT
******************************/

    css for screen 480px+ goes here

}

@media screen and (min-width: 660px) {

    css for screen 660px+ goes here

}

While it does have @ media inside of each is not valid CSS.

Mark

Martin Mihailovski
Martin Mihailovski
5,646 Points

I feel like a stupid man now, i found my problem.

I have worked on another responsive.css document.

Thank you Mark.

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Anytime and no worries. It happens to everyone at some point.