Для правильного вопроса надо знать половину ответа
Классы у вас не меняют друг друга, а просто устанавливаются. В результате, после второго вызова addClass установлены оба класса и больше ничего не меняется.
А для отслеживания transition есть набор событий. https://developer.mozilla.org/en-US/docs/Web/API/H...
Для правильного вопроса надо знать половину ответа
Позиционирование fixed всегда будет размещать блок по абсолютным координатам экрана.
Могу посоветовать разместить в нужном месте блок-обёртку, в который добавлять дочерние блоки с предупреждениями.
Для правильного вопроса надо знать половину ответа
В элемент <a> нельзя вкладывать интерактивные элементы (<a>, <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> и <textarea>).
Повесьте на вложенный элемент обработчик события click и выполняйте переход средствами JavaScript.
Для правильного вопроса надо знать половину ответа
Если вы просто указали медиа-запрос для разрешений, больших 768, то он и будет для всех разрешений, больших 768, в том числе и для 992 и для 1200. Поставьте ограничение сверху.
Для правильного вопроса надо знать половину ответа
Цвет этих символов заложен прямо в Unicode:
#128314 - Красный треугольник с верхушкой, направленной вверх
#128315 - Красный треугольник с верхушкой, направленной вниз
Возьмите символы #9650 - ▲ и #9660 - ▼
Для правильного вопроса надо знать половину ответа
.block .item { } - все потомки элемента с классом block имеющие класс item .block > .item { } - непосредственные потомки элемента с классом block имеющие класс item