Почему не работают медиазапросы в мобильной версии хрома?

Andrew Ghostuhin, первый скриншот в хроме. Написал же выше, что в стандартном браузере все хорошо. Теперь хочу узнать почему так.

Как сделать, чтобы элемент появлялся при клике на кнопку плавно, но в дальнейшем не исчезал при повторном нажатии на эту кнопку?

Большое спасибо.

Как и каким способом лучше спозиционировать изображения?

Рустам Байназаров, то что нужно, спасибо!

Как поставить направляющую при выделеном тексте?

Увы, нет, направляющие прилипаю гораздо ниже границы текста с учетом line-height.

Как изменить padding у текста?

Stalker_RED, не работает.

Как изменить padding у текста?

Нет.

Почему не работает linear-gradient на Android?

tyzberd, а как тогда лучше это реализовать? Других идей у меня нет, увы.

Почему не работает linear-gradient на Android?

body {
  height: 6160px;
  min-width: 1422px;
  max-width: 1440px;
  margin: auto;
  line-height: 1.4;
    background: -webkit-gradient(linear, left top, left bottom, from(#87509c), color-stop(10%, #87509c), color-stop(10%, #17c2a4), color-stop(22%, #17c2a4), color-stop(22%, #e7f1f8), color-stop(37%, #e7f1f8), color-stop(37%, #ffff), color-stop(48%, #ffff), color-stop(48%, #ffdd99), color-stop(70%, #ffdd99), color-stop(70%, #d74680), color-stop(85%, #d74680), color-stop(85%, #3c5499), color-stop(98%, #3c5499), color-stop(98%, #344b8e), to(#344b8e));
    background: -webkit-linear-gradient(top, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, #ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
    background: -o-linear-gradient(top, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, #ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
    background: linear-gradient(to bottom, #87509c 0%, #87509c 10%, #17c2a4 10%, #17c2a4 22%, #e7f1f8 22%, #e7f1f8 37%, #ffff 37%, #ffff 48%, #ffdd99 48%, #ffdd99 70%, #d74680 70%, #d74680 85%, #3c5499 85%, #3c5499 98%, #344b8e 98%, #344b8e 100%);
 }

Изменил код, но это не помогло.

Как определить, корректный ли синтаксис?

Краб Анархист действительно, проглядел. Интересно, почему мне W3C валидатор об этом ничего не сказал :-) И проблема с различием в 1 процент я так понимаю уже на стороне сайта?

Как исправить проблемы с атрибутами srcset и sizes?

В адаптивном режиме все работает, переключаюсь в режим мобильного устройства - нет.

Как исправить проблемы с атрибутами srcset и sizes?

RAX7, добавил <meta name="viewport" content="width=device-width, initial-scale=1.0"> и сохранил у себя твой код, теперь снова не работает. Ширина окна 360px, условие не выполняется ¯\_(ツ)_/¯

Как исправить проблемы с атрибутами srcset и sizes?

RAX7, Все работает, при ширине меньше 320px загружает нужную картинку. Скриншот прилагаю, благодарю за решение.

Как исправить проблемы с атрибутами srcset и sizes?

RAX7, отключил, все равно загружает картинку размером 800px при ширине экрана в 360.

https://jsfiddle.net/ph408wqm/1/

Кликаю Run, картинки не обновляются, странно