I've been trying to figure out how to adjust the CSS media queries on a retina display to match the smaller screens of laptops.
Here's how it currently appears on my MacBook with a 1920 x 1080 screen:
https://i.sstatic.net/06cmP.png
I want it to look more like this, similar to how it appears on a smaller screen:
https://i.sstatic.net/iEw8x.png
The current media queries are as follows:
@media screen and (min-width: 500px) and (max-width: 767.9px)
@media screen and (min-width: 768px)
@media screen and (min-width: 960px)
@media screen and (min-width: 992px)
@media screen and (min-width: 1200px)
@media screen and (min-width: 1440px)
@media screen and (min-width: 1660px)
@media screen and (min-width: 1920px)
If anyone has any advice or tips on how to achieve this, I would greatly appreciate it.