0

I have a rookie problem with some CSS media queries. You see, I already have the <meta name="viewport" content="width=device-width, initial-scale=1"> tag in my header. However, when I run the media query...


@media screen and (min-width: 800px) and (max-width: 1281px){

    body{
        display: none;
    }
}

It doesn't quite work the way it's supposed to. I am working in a Mac Pro 13 and the query actually executes from 640px to 1025px.

I have no idea what I'm doing wrong but I'm sure it's a rookie mistake. If anyone could help me it would be greatly appreciated.

Alek Carvajal
  • 101
  • 1
  • 2
  • 6
  • Maybe this will help: [Media Queries firing at wrong width](https://stackoverflow.com/a/26709884/11700321). `TLDR;` 1. Make sure your browser is at `100%` zoom. 2. Consider using `em` or `rem` instead of `px`. 3. Force the zoom/scale of the browser window with Javascript for more reliable results. – EGC Nov 08 '19 at 03:26
  • 1
    Thank you @EGC! it was the zoom, I swear this was driving me crazy. – Alek Carvajal Nov 08 '19 at 15:49

1 Answers1

0

Have you tried using @media all insted of @media screen ?

AdamKniec
  • 1,607
  • 9
  • 25