MacBook MediaQueries

Question

I have created some CSS that uses media queries:

@media (max-width: 1230px) {

    .under_navi {
        height: 300px;
        text-align: center;
        .container {
            width: 100% !important;

        }
        .left_image {
            float:none;display: inline-block;
            width: initial !important;
        }
        .left_image {
            width: 100% ;
        }
    }
    .right_icons {
        float: right;
        margin-top: 18px;
        width: 100%;
        text-align: center;
    }
    .right_icons .icon {
        float: none;
        display: inline-block;
        margin-left: 13px;
    }

}

On Windows or any other device it is OK, but not on a MacBook. The @media (max-width: 1230px) line means the styles will be applied only after 1230px device width.
But on 13.3-inch MacBook (2560 x 1600) it is being applied all the time.
Any ideas?

Answer 1

I noticed a lot that when I was designing on a retina display, it would just ruin most of my work. Try to adjusting your view port settings so it displays as regular resolution and work from there... Until the market is saturated with screens higher than 1080, it kind of sucks to work at higher!