I have a problem with a screen that has 3800x2400 resolution at 300% recommended. I have one screen at 1920x1080 (monitor 1) and the other as mentioned above (monitor 2), I'm working with rems and my code shows up perfect in monitor 1 but gets too big in monitor 2: all the sizes, margins, paddings are the same in px when I inspect the DOM, except that in monitor 2 it shows up too big and has scroll bars.
html {
font-size: 8px;
@media (min-width: @screen-sm-min-width) {
font-size: 10px;
}
}
@screen-sm-min-width = 768px
I use rems that calculates for mobile based on 8px, and for a tablet or larger calculates based on 10px.
monitor 1
monitor 2
In monitor 2, its too big and it needs a scrollbar. I inspect the DOM and all the sizes are ok in pxs, same as in monitor 1. Why is this showing up like this?