Павел Гришин

возможно я туплю и не понимаю вопроса.
Но :
img => width = 100%
grid_1 => убрать фиксированную высоту

Собственно всё.
P.S. чтоб убрать полоску у жёлтого дива (grid_photo) img => vertical-align: middle;

А если в свободном состоянии у инпута убрать бордер и цвет фона прозрачный, а при фокусе давать бордер.
что то вроде https://jsfiddle.net/2m2kbcg2/

frontender.info/webkit-implements-srcset-and-why-i...
это если не нужна поддержка IE и опера мини.
P.S. Ретина либо на маках , где нет IE, либо на оч хороших мониторах, где тоже скорей всего нет IE. А если человек пользуется оперой мини, то и картинки в 2 раза большего размера ему не к чему.

как то так?
jsbin.com/xuwirajuxo/edit?html,css,output

Спасибо Condor. Но в своё оправдание:
1)В описании ТЗ шрифты оговорено игнорировать
2) Пытался сделать псевдоклассами, но при наведении на псевдокласс бекграунт у пункта меню пропадает (отсюда и названия блоков т.к. изначально были псевдоклассы)
3)По макету blog должен быть отдельной кнопкой
4) Тут согласен
5,6,7,8,9,10) Так было в макете. Цвета, кнопки, ссылки, расположение и т. д.
11) А вот тут поподробней, в чём недостаток адаптивности? Открывал на своём телефоне, вроде ничего не сдвигается, всё на своих местах.

P.S. А как правильно делать адаптив, как назначать отступы? если в пикселях то ведь на каждом разрешении будут разные отступы. И если блок не помещается на маленьком экране, что с ним делать?