title: How do I deal with multiple screen resolutions zoomed in at large percents (300%)
body: <p>I've designed a dashboard for my site that on my screen looks fairly nice. My resolution is 1920x1080 at 100% zoom. My dashboard looks awful on my coworkers computer because he is at 3200x1200 at 300% zoom. Another coworker is 1280x720 at 150% zoom. I'm having difficulties figuring out how to account for all of these drastically different screen sizes.</p>
  
  <p>I have been using media queries and a grid system to move certain components around based on the screen size, but I feel like I'm not correctly understanding the best way to deal with a vast range of screen sizes. I'm also having a difficult time even testing how my dashboard would look on certain screens because I can't set my resolution to 3200x1200 at 300% zoom.</p>
  
  <p>What I would like to have happen is essentially set up break points for if the screen is a tablet size or smaller to rework the order of my components, but for anything above that, just essentially have the screen sort of shrink so the layout looks the same for every laptop.</p>
  
  <p>To implement this I have tried things like this:</p>
  
  <pre><code>`@media (min-width: 1400px) {
      .dashboard {
          zoom:70%;
      }
  }
  </code></pre>
  
  <p>`</p>
  
  <p>but I've heard using zoom isn't smart for production sites because it doesn't work on all browsers. I have also tried using webkit and transform, but while that shrinks that dashboard, it also shrinks the overall width and height so it no longer covers the container.</p>
  
  <p>This may be tagged as a repeat question, but the only things I found similar were from 8 years ago and the methods were completely different.</p>