Build a Product Landing Pagehttps://codepen.io/kittles04/pen/OqmRvz

Tell us what’s happening:
Hey I put my media query into my Css so the background image changes at 1000px. But nothing is happening

I might suggest you open your developer tools (in most modern browsers, hit F12), and use the ‘Inspector’ (or ‘Elements’) tab to view the CSS applied to the body tag.

It actually is doing exactly what you want. But you might want to make the styles for screens > 1000px as well, and move the default background and stuff in there. It is trying to apply BOTH, and your media query is the one being overwritten.

Here’s a screenshot to show what I mean – look in the lower right corner of the image:

1 Like

Thanks for the tips. Unfortunately the website isnt showing up, only the code when I open up codepen. But Thanks for the screenshot

this is because codepen utilizes frames and dev tools function on a specific frame (you may have to resize the dev tool window).

you can also try this: when you are in a codepen, go to the upper right corner and click on Change View and select debug mode. a new window will open with a larger view of your web page without the code frames cluttering the view. snowmonkey’s method should work better for you now.

1 Like
@snowmonkey. Thanks, i changed it a little bit. 

Now the code in my Inspector looks like this :  <style>
      @media only screen and (max-width: 1000px) {
  body{
  background-image: url(https://bit.ly/2Tlv1Tw);
  background-size: 100%;
   
  
}
}
body{

  margin: auto 0;
  background-image: url(https://bit.ly/2TDjZZ8);
  background-size: 100%;
  background-repeat: repeat-y;
  color: black;
  text-align: center;
  font-size: 42px;
   
}

It didnt do anything to my site.