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 CSS Layout Techniques Float Layout The Float Clearfix

Posted by monikaneudek
monikaneudek
2,566 Points

why workspace shows my media querie RED like it's wrong?

Hi there! can anyone see any mistake is my code? Worksace put on red max-width and the first {. What is the issue here?

I would very appreciate an explanation :)

@media (max-width: 768px) {
    .main-wrapper,
    .main-nav li, 
    .main-logo {
        width: initial;
        height: initial;
    float: initial;
    }
    .main-logo {
        margin-right: 0;
    }
.extra-content {
        display: none;
    }
}

3 Answers

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Mmmm if you target the "screen" in your media query...or "all" or some other target it fix the problem, but iirc just the "@media (min-width: n px)" should work fine. I don't know if its some problem with the workspace or if there is some other kind of issue I ignore.

Julian Aramburu
Julian Aramburu
11,368 Points
Julian Aramburu
Julian Aramburu
11,368 Points

Hi Monika! Could you provide the upper part of your code? Maybe the problem is not in your media query!

monikaneudek
monikaneudek
2,566 Points

for example in this css is happens again, with no reason : 

/* Page Styles
================================ */

*{
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font: normal 1.1em/1.5 sans-serif;
  color: #222;
  background-color: #edeff0;
}


/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo         { background-color: #5fcf80; }
.main-nav li       { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */

.main-header {
  padding: 15px;
}
.main-logo {
  margin-top: 0;
  margin-bottom: 0;
}
.main-nav li {
  margin-top: 15px;
}
.main-logo a,
.main-nav a {
  display: block;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 5px 15px;
  border-radius: 5px;
}
.main-footer {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Column Layout
================================ */

.col {
  padding: 20px;
}
.extra-content,
.main-banner {
  display: none;
}

/* Imagery
================================ */

.feat-img {
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
  border: solid 1px;
  padding: 5px;
}

/* Media Queries
================================ */

@media (min-width: 769px) {

/* Header and Banner
============================*/
  .main-logo,
  .main-nav li {
    float: left;
  }
  .main-logo {
    margin-right: 50px;
  }
  .main-nav li {
    margin-left: 15px;
  }
  .main-banner {
    background: #dfe2e4;
    text-align: center;
    padding: 35px 15px;
  }

  /* Column Layout
============================*/

  .col {
    float: left;
    width: 30%;
  }
  .primary-content {
    width: 40%;
  }
  .col:last-child {
    float: right;
  }
  .extra-content,
  .main-banner {
    display: block;
  }

  /* float clearfix
============================*/

  .group:after {
    content: " ";
    display: table;
    clear: both;
  }

  /* Imagery
============================*/

.feat-img {
    width: 50%;
    float: left;
    margin-right: 25px;
  }

}
monikaneudek
monikaneudek
2,566 Points
monikaneudek
monikaneudek
2,566 Points

ok, clear. Thanks :)