Не работает @media на моём устройстве на других работает

Код не реагирует на @media при загрузке сервера.

<template>
<div class="main">
    <div class="logo">
        <img src="./pngegg.png" alt="">
    </div>
    <div class="info">
        <div>
            <input type="text"  class="login" placeholder="Введите логин "> 
        </div>
        <div    >
            <div class="password_label">
               <div class="password_form">
                    <input type="password" class="password_form" id="password-input" placeholder="Введите пароль" name="password">
                    <div class="password_btn">
                             <img v-on:click="showOrHide" id="password-control"  src="./glas.png" alt="">
                    </div>
                   
                </div>
            </div>
            <div>
                <button class="btn">Войти</button>      
            </div> 
        </div>
    </div>       
</div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
components: {
},
methods:{
            showOrHide: function(){
                const input = document.getElementById('password-input');
                const image = document.getElementById('password-control');
                
                if (input != null && image != null) {
                if (input.getAttribute('type') == 'password') {
                    input.setAttribute('type', 'text');
                    image.classList.add('view');
                }
                else {
                    input.setAttribute('type', 'password');
                    image.classList.remove('view');
                }
                return false;
                }
            return false;
            }  
            }
})
</script>
<style>
.main{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.logo img{
    width: 300px; 
    height: 300px;

}

.password_form{
    margin-top: 5%;
    height: 40px;
    font-size: 16px;
}

.btn{
    margin-top: 30px;
    margin-left: 60px;
    width: 80px;
    height: 40px;
    font-size: 16px;
    cursor: pointer;
}

.login{
    height: 40px;
    font-size: 16px;
}

.password_label{
    position: relative;
}

.password_btn{
    position: absolute;
    right: 8px;
    top: 18px;
}

@media (max-width: 740px) {
  .main {
    flex-direction: column;
  }
  .info{
      flex-direction: row;
  }
  .logo img{
    width: 100px; 
    height: 100px;
    }
}

</style>

logo должно уезжать на верх но этого не происходит почему то. На 2 других устройствах работает а у меня нет. Вариантов нет Компьютер

Компьютер

Отзывчивое устройство

Отзывчивое устройство