Media Query не работает с настройкой размера браузера

Question

Я использую Media Queries для того, чтобы сделать мой сайт мобильным и адаптивным.Я использовал функцию эмулятора Google Chromes, чтобы проверить это, и все это прекрасно работает.

Что-то, чего я не понимаю, это то, что когда я настраиваю браузер, он не реагирует должным образом с медиа-запросом.Я предполагаю, потому что я только изменяю ширину экрана, но не высоту, и это, я полагаю, вызывает проблему, с которой я не знаю, как правильно справиться.

Вот код медиазапроса, который я реализовалв мой CSS-файл (если вам нужно его увидеть).

    /* MEDIA QUERIES FOR VERTICAL VIEWING */

/*For Older, Smaller Smart Phones */
@media screen and (min-width:300px)
{
    .paral
    {
        min-height: 60vh;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height:100vh;
    }
    .paral h1
    {
        color: white;
        font-size: 8vw;
        text-align: center;
        padding-top: 40px;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 60px;
    }
    .paral-home-setting
    {
        width: 70vw;
    }
    .btn-home-margin
    {
        margin-top:5vh;
        width:33vh;
        font-size: 5vw;
    }

}




/*For Modern Smart Phones */
@media screen and (min-width:350px)
{
    .paral
    {
        min-height: 60vh;
        background-attachment: fixed;
        background-size: cover;
        background-position: 50% 50%;
        width: 100%;
        height:100vh;
    }
    .paral h1
    {
        color: white;
        font-size: 7vw;
        text-align: center;
        padding-top: 40px;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 60px;
    }
    .paral-home-setting
    {
        width: 70vw;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:30vh;
        font-size: 5vw;
    }

}
/* For Small Tablets */
@media screen and (min-width:500px)
{
    .paral h1
    {
        color: white;
        font-size: 8.5vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 60px;
    }
    .paral-home-setting
    {
        width: 80vw;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:30vh;
        font-size: 5vw;
    }

}

/* For Medium Tablets */
@media screen and (min-width:700px)
{
    .paral h1
    {
        color: white;
        font-size: 8.5vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 6vh;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:35vh;
        font-size: 5vw;
    }
    .paral-home-setting
    {
        width: 80vw;
    }

}

/* For Large Tablets */
@media screen and (min-width:1000px)
{
    .paral h1
    {
        color: white;
        font-size: 7vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 6vh;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:35.8vh;
        font-size: 5vw;
    }
    .paral-home-setting
    {
        width: 80vw;
    }

}

/* For Standard Laptops */
@media screen and (min-width:1280px)
{
    .paral h1
    {
        color: white;
        font-size: 4vw;
        text-align: center;
        padding-top: 4vh;
        word-wrap:normal;
    }
    .paral p
    {
        font-size: 4vh;
        color:white;
        text-align: center;
        line-height: 6vh;
    }
    .btn-home-margin
    {
        margin-top:6vh;
        width:36vh;
        font-size: 2vw;
    }
    .paral-home-setting
    {
        width: 50vw;
    }

}