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 Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

The media query does not activated

I am trying to remove the parallax effect(position:fixed for the back ground image) in the mobile view. But the media query is not getting activated. Can any one help me on that <pre> .girl-cover-photo{ height: 730px; background: url('../img/girl-cover.jpg') fixed; background-repeat: no-repeat; background-size: cover; @media screen and (max-width: 768px){ .girl-cover-photo{ background: url('../img/girl-cover.jpg') relative; } } } </pre>

3 Answers

jag
jag
18,266 Points
jag
jag
18,266 Points 
.girl-cover-photo{  
    height: 730px; 
    background: url('../img/girl-cover.jpg') fixed; 
    background-repeat: no-repeat; background-size: cover;
}
@media screen and (max-width: 768px){ 
     .girl-cover-photo{ background: url('../img/girl-cover.jpg') relative; }
}

You accidentally included the media query within a class style.

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Still it does not work. Did you test it? And sass allows media queries inside right?

jag
jag
18,266 Points
jag
jag
18,266 Points

I wasn't aware you were working with sass. The code works when I apply it with a different picture here:

https://jsfiddle.net/7sx12m3m/

Does sass allow media queries? I'm not sure I don't work with sass but from what I see yes, nesting is allowed for media queries.

Providing your code will help see what the issue might be.

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points
Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Actually apart from the css i have mentioned in the question. I have the plain html like this <section class=".girl-cover-photo"></section>. So instead of making background relative .. I solved by making background: scroll. ps: I did not solve it http://stackoverflow.com/questions/34260116/how-to-make-the-position-static-in-mobile-view/34260491#34260491 :p

Eric Butler
Eric Butler
33,512 Points

Yes, good catch: here's the documentation on the background-attachment property. "Scroll" is the default, "relative" isn't a valid value.

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Hi Vamsi,

If you are using Sass, you don't need to re-specify the element inside the media query. You should write:

.girl-cover-photo {
  height: 730px;
  background: url('../img/girl-cover.jpg') fixed;
  background-repeat: no-repeat;
  background-size: cover;
  @media screen and (max-width: 768px) {
      background-attachment: scroll;  /* UPDATED TO USE "SCROLL" VALUE */
  }
}

Hope that solves it!

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

The thing is it's not about nesting. It's about the keyword relative. For background the relative does not get applied, to fix we need to make the background scroll! And BTW how did you format your snippet like that? I could not do it properly in the question.

Eric Butler
Eric Butler
33,512 Points

You're right, I updated my answer. For formatting, click the "Markdown Cheatsheet" link below the textarea to see how to format code. You wrap your code in new lines with 3 backticks ( ` ).

Cool!

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

But, why the problem appears when I specify the class explicitly inside the media query

jag
jag
18,266 Points
jag
jag
18,266 Points

DRY - Don't Repeat Yourself

SCSS wasn't designed to be used in such a way. Specifying it would make it redundant & since sass is a css complier it's all about making the most work with the least code.

Eric Butler
Eric Butler
33,512 Points

It's just not how Sass is written. You could write this, using plain CSS:

.girl-cover-photo {
  height: 730px;
  background: url('../img/girl-cover.jpg') fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .girl-cover-photo {
      background-attachment: scroll;
  }
}

Or you could write this same exact thing, but in Sass syntax:

.girl-cover-photo {
  height: 730px;
  background: url('../img/girl-cover.jpg') fixed;
  background-repeat: no-repeat;
  background-size: cover;
  @media screen and (max-width: 768px) {
      background-attachment: scroll;
  }
}

It's just the syntax rules for each language.

Vamsi Pavan Mahesh Gunturu
Vamsi Pavan Mahesh Gunturu
4,541 Points

Yea, cool! Just fiddling with sass recently. They say, you don't write css anymore :D