1

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.

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.

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.

To implement this I have tried things like this:

`@media (min-width: 1400px) {
    .dashboard {
        zoom:70%;
    }
}

`

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.

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.

Ianohurr
  • 129
  • 3
  • 10
  • 1
    Why are they using zoom in the first place? That should not be something to do in order for a site to *look good*; I really recommend just making sure that your site, at 100% zoom looks good on any screen size, without taking zoom into account since that's actually not something that should be done if the site looks well... same idea as this question: https://stackoverflow.com/q/55524856/8437694 – IvanS95 Apr 17 '19 at 22:21
  • Their computers automatically recommend a resolution that is zoomed in far past 100%. They aren't zooming in on the browser, but zooming in when they change resolution. – Ianohurr Apr 17 '19 at 22:28
  • 1
    So I'm getting it that your co-workers have their PCs display resolution zoomed, not the browser window itself... Can't they set it back to it being 100%?, its just that it's an odd way to have it set up, and accounting for zoom in your dashboard will give you a lot of headaches – IvanS95 Apr 17 '19 at 22:31
  • It's not feasible for me to tell people to change their computer resolutions, which is why I'm just trying to find some solution. If there was someway to essentially add into a media query that if the screen size is between (x-x2), automatically treat this like it was zoomed to 100%, not 300%. – Ianohurr Apr 17 '19 at 22:35
  • 1
    Fair enough... I found [this answer](https://stackoverflow.com/questions/22223866/media-queries-for-different-zoom-levels-of-browser) maybe it can point you in the right direction – IvanS95 Apr 17 '19 at 22:38
  • 2
    Also according to comments in [this forum](https://css-tricks.com/forums/topic/media-queries-and-browser-zooming-trouble/) in order for the zoom to be taken into accounts, the media query has to be declared in `ems`, I'm not sure though... Even more info [here](https://css-tricks.com/zooming-squishes/) – IvanS95 Apr 17 '19 at 22:41

0 Answers0