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 Unused CSS Stages Media Queries Media Features and Media Types

Janise Bradford
Janise Bradford
5,664 Points
Posted by Janise Bradford
Janise Bradford
5,664 Points

Media features and Media Types 1st Video

When adding the second media query (in the 1st media query video), to change the color to blue with a max-width of 480px, my screen size will not decrease any smaller than the 768px. When using the arrow on the side of the screen, to decrease the screen size, it's like the screen is locked at the 768px width.

Does anyone know what might be causing this, and how to make it go smaller?

Here's the code I'm using:

@media screen and (max-width: 768px)  {
      body  {
        background: #FF6347;
        color: #FFF;

        }
   }

   @media screen and (max-width: 480px)  {
         body  {
         background: #468284;

      }

}

UPDATE!!

Just discovered that this code works perfectly as it supposed to while in Firefox, but won't work in Chrome.

Lisa Tan
Lisa Tan
4,673 Points

What browser are you using? I use Chrome and I like to use Inspect Element (right click --> Inspect Element), and you'll see the console will pop up at the bottom of your browser. Look to the top right corner of the console; next to the X close button, there is a button that will move the console to display down the right hand side of the browser. You can then drag your page in to be as narrow as possible.

It has nothing to do with your code, it' just the browser.

Hope this helps.

Lisa

Janise Bradford
Janise Bradford
5,664 Points
Janise Bradford
Janise Bradford
5,664 Points

Thanks Lisa, I tried doing as you suggested, but I can't find the button in Chrome to move the console to display down the right hand side of the browser. Is this button in the settings area? The only button near the X/close button is a button to undock the console.

Can help me to find this button to move the display?

Thanks again!

UPDATE!

I just discovered that I get the desired effect while using firefox, but can't drag my screen to 480px while in Chrome.

2 Answers

Cameron Bourke
Cameron Bourke
10,198 Points
Cameron Bourke
Cameron Bourke
10,198 Points

768px is weird. I mean the smallest it goes on my browser is around the 400px mark, however I use a bookmarklet called Resizer to let me work on screen widths smaller than 400px, like iPhones. The links below, it is awesome when it comes to mobile first approach.

http://lab.maltewassermann.com/viewport-resizer/

Lisa Tan
Lisa Tan
4,673 Points
Lisa Tan
Lisa Tan
4,673 Points

Try the button to the left of the "Show in separate window" button. When you hover over it, it will say "Dock to side of window browser"