Сергей delphinpro

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

Но допустим, что задача у вас стоит именно так как вы обозначили - сайт всегда масштабируется к размеру экрана (пусть к ширине, это чаще бывает). Тогда вам следует все величины, задающие расположение и размеры блоков на странице, рассчитывать и указывать в процентах (%), либо вьюпортах (vw). Отдельно нужно будет проработать типографику. Здесь тоже только ремы (rem) и емы (em). Так будет проще сделать несколько контрольных точек для изменения шрифтов. Также можно обратить внимание на метод отзывчивого размера шрифта с использованием calc и rem.

Еще один обязательный пункт - максимальное использование векторных изображений, логотип и иконки, как минимум (хотя этот пункт для любой верстки уместен).

репа на гитхабе, пара cmd-скриптов и две кнопки на тулбаре total coomander. Старт проекта сводится к последовательному нажатию этих двух кнопок, затраты времени на весь старт до запущенного browser-sync - секунд тридцать.

Просто и красиво сделать можно (будет в будущем)

display: initial;

А пока что IE про это значение не знает caniuse.com/#feat=css-initial-value

www.formvalidator.net

https://www.w3.org/TR/html52/document-metadata.htm...

Конкретнее по вопросу здесь и, соответственно, здесь.

Скорее всего js файл не видит этот класс в html-document.

Госпаде, что за формулировочки...
Объясняю. Когда вы навешиваете событие, а элемента нет, естественно ничего никуда не навесится. Вот элемент появился, но код навешивания событий уже отработал, кто назначит событие? Вот поэтому и не работает.
Для разрешения таких ситуаций используют делегирование событий. Т.е. событие навешивают на родительский блок, который гарантированно изначально присутствует на странице, как бронебойный вариант - сам document, и в этом событии проверяют кто его инициировал (event.target). И если это наш элемент, то выполняют обработчик.

Если вы используете jQuery, то там для делегирования используется все тот же метод .on(), который цепляют к родительскому блоку, а вторым параметром передают селектор элемента, который нужно отслеживать (см. код приведенный пользователем tester_toster )

Надеюсь, я хоть немного заполнил ваши пробелы в знаниях и в следующий раз вы не будете писать "js не видит класс".

https://jsfiddle.net/9vbmfxeb/2/

www.jacklmoore.com/zoom

Кто-то в 2017-ом еще верстает на голом html/css без доп инструментов?

Gulp - наш выбор.

У вас в html есть эти пробелы, значит они будут отображаться.
Либо пишите текст вплотную к тегам, либо вплотную к началу строки.

https://jsfiddle.net/DelphinPRO/669nmwtx/
100px поменяйте на 600px

https://developer.mozilla.org/ru/docs/Web/Guide/CS...

masonry.desandro.com

https://jsfiddle.net/4sdf04vk/

Примерно как-то так.
На скорую руку сверстал, только чтобы показать основные принципы.
Решение требует доработки.
Для адаптивности нужно добавить медиа-запросы.
Блок кода, где использованы nth-child для минимизации конфликтов стилей обернуть в строгие диапазоны пикселей (например 0-479, 480-922, 922-...)
Оперируя миксинами для создания рамок назначить нужные скругления. Миксины, возможно, придется доработать, чтобы совместить два скругления на одном блоке (на мобиле, когда они будут в один столбик)
В медиазапросах не забыть добавить order для правильного порядка следования блоков.

https://jsfiddle.net/DelphinPRO/63zpaag6/

В общем-то ничего архи-сложного. Но для получения товарного вида придется затратить время =) Дерзайте.

https://jsfiddle.net/L6vtdgsx/1/

jsfiddle.net/uE6pr/316

.append() добавляет не после, а в конец элемента
инпут не может содержать дочерних узлов, вот и не работает.
вам нужен .after()

Включи логику.
Ты задал абсолютное позиционирование, вырвав тем самым элемент из потока.
И пытаешься задать ему обтекание.
Внимание вопрос: какие элементы его будут обтекать, если сам элемент вырван из потока?

Вывод: float для твоей задачи не подходит.

Думай дальше. Ты задал позиционирование элементу. Какие свойства задают позицию блоков?
Догадался уже, наверное - top, left, right, bottom.

PS. Не стесняйтесь включать мозги =) Помогает в решении проблем.

В отрыве от контекста оба утверждения звучат верно.
Где вы хотите использовать em? Вот в чем вопрос.
В статье - там ему самое место.
Телефон в шапке должен быть наклонным - используйте стили.

heigh: calc(100vh-100px);