Как изменить CSS в зависимости от размера дисплея

Question

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

* {
    box-sizing: border-box;
} 

body, html {
    background: #fff;
    height: 100%;
    margin: 10px;
}

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
} 
}

Answer 1

Медиа-запросы в верхней части CSS нужны! Важно, чтобы переопределить медиа-запрос. Медиа-запросы внизу не нужны! Важно. Я поместил запрос сверху, поэтому я использовал! Важное, чтобы переопределить любой другой стиль после.

@media screen and (max-width: 500px) {
.left__img2 {
width: 10px !important;
} 
}

* {
box-sizing: border-box;
} 

body, html {
background: #fff;
height: 100%;
margin: 10px;
}

.left__img2 {
position: absolute;
float: left;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
border-radius: 20px;
width: 600px;
height: 400px; 
} 

Answer 2

Я думаю, это будет работать.

@media screen and (max-width: 500px) {
.left__img2 {
    max-width: 10px;
} 
}

Answer 3

Ваш код работает хорошо в следующем примере (измените размер вашего окна) , возможно, это происходит из-за побочного эффекта остальной части вашего кода, вы можете показать нам остальную часть вашего кода?

.left__img2 {
    position: absolute;
    float: left;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 20px;
    width: 600px;
    height: 400px; 
    background-color: red;
} 


@media screen and (max-width: 500px) {
.left__img2 {
    width: 10px;
    background-color: yellow;
} 

<div class="left__img2"><div>