media query non responsive

Question

OK so I have not used a media query for some time but i believe I have done it correctly. I am not using sass or less just plain old css.

.btn-test {
    border-radius: 2px;
    border: 1px solid #2e70a4;
    color: #fff;
    font-size: 12px;
    background: #2c83c9;
    position: relative;
    transition: all .2s ease;
    display: inline-block;
    text-decoration: none;
    margin: 18px 9px 0 0;
    padding: 5px 9px 0 9px;
    height: 37px;
    line-height: 16px;
    text-align: center;
}


@media only screen
and (min-device-width: 850px)
and (max-device-width: 1050px)
{
    .btn-test {
        line-height: 34px;
        font-size: 8px;
    }

    .arrow-call-to-action {
        font-size: 8px;
    }

    .call-to-action-list p {
        font-size: 8px;
    }
}

so I set my screen to 900 where the media query should be active, however I see no change, have i done this correctly ?

Thanks.

UPDATE HTML ADDED

 <li>
                <div class="t4 arrow-call-to-action">
                    somthing
                </div>

                <div class="t5">
                    <p>text
                        <br>more text<br>
                    </p>
                </div>

                <div class="t6">
                    <a href="#" class="btn-test"
                       id="some-tracking-id">Buy Now
                    </a>
                </div>
            </li>

Answer 1

Use min-width and max-width if you want to test by resizing the browser window. Min-device-width will not be affected by the resize because the device is not changing size.