CSS Unused CSS Stages Media Queries Media Features and Media Types

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.

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

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

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/

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"