Div с фоновым изображением не масштабируется медиа-запросами

Question

page in quesstion. У меня есть шахматная доска, где каждая ячейка является div. Я хочу, чтобы плата расширялась за определенные минимальные ширины, используя медиа-запросы, но это не так.

Клетки генерируются циклом ngFor. Черными ячейками являются класс b, белые ячейки - класс w, ячейки наполнителя вне доски (для интервала) - это класс e. Я изменяю padding и background-size на эти divs в медиа-запросах.

Медиа-запрос правильно перемещает мое меню div при изменении масштаба браузера. Но это не изменение фонового изображения и отступов к e, b и w div.

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

Вот блок CSS с запросами СМИ:

.b{ 
    float: left; 
    border-width: 2px; 
    border-style: solid; 
    border-color: #a5a5a5; 
    background-color:  #686868 ; 
    background-size: 23.2px 23.2px; 
padding: 10px; 
} 
.w{ 
    float: left; 
    border-width: 2px; 
    border-style: solid; 
    border-color: #a5a5a5; 
background-color: #e5e5e5; 
    background-size: 23.2px 23.2px; 
padding: 10px; 
} 
.board{ 
width: 100%; 
display: flex; 
padding: 10px; 
} 
.menu { 
    width: 100%; 
    order: 1; 
    } 
    .rewind{ 
    padding: 10px; 
    } 
@media (min-width: 1100px) { 
    .menu { 
    order: 1; 
    width: 25%; 
    } 
    .board { 
    order: 0; 
    width: 75%; 
    } 
    .e{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    .b{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    .w{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
} 

@media (min-width: 420px) { 

    .e{ 
    background-size: 33.2px 33.2px; 
padding: 15px; 
    } 
    .b{ 
    background-size: 33.2px 33.2px; 
padding: 15px; 
    } 
    .w{ 
    background-size: 33.2px 33.2px; 
padding: 15px; 
    } 

} 

Платформа: Все браузеры, и использует угловые 1.5.8, 3.3.7 Bootstrap

Answer 1

Там опечатка в вашем CSS file на сайте (не в фрагменте кода выше).

Классы CSS здесь нуждаются в периодах перед буквами, а не после.

Большая версия платы выглядит хорошо, когда она изменена. Это решение проблемы?

@media (min-width: 420px) { 

    e.{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    b.{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    w.{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
}