Адаптивная вёрстка

[Memphis]

Всем привет, собственно вот PSD http://file-up.net/big_5b90a8840b4b78d55d20140521153125.jpg , а вот вёрстка  http://agencyyy.besaba.com/

 

Жду...

[Ironimus]

Попробуйте увеличить масштаб и посмотрите на меню. И кстати, если плавно меняется фон кнопки меню при наведении, то сделайте чтоб и рамка тоже плавно меняла цвет. Делается очень просто:

.header-nav li{  transition: background 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0, border-bottom 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0;  border-bottom: 3px solid rgba(255, 255, 255, 0);}

[ryter]

ну В общем то весьма не плохо выглядит для первого раза!

[akorshun]

c формой поиска что то явно не то.. при клике на неё там летят какая то куча луп

на телефоне меню будет наезжать 

Edited May 21, 2014 by akorshun

[Memphis]

ну В общем то весьма не плохо выглядит для первого раза!

а для 6? ))) Поконкретней если можно

 

Попробуйте увеличить масштаб и посмотрите на меню. И кстати, если плавно меняется фон кнопки меню при наведении, то сделайте чтоб и рамка тоже плавно меняла цвет. Делается очень просто:

.header-nav li{  transition: background 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0, border-bottom 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0;  border-bottom: 3px solid rgba(255, 255, 255, 0);}

Увеличил масштаб, что дальше? Всё ровно вроде

[Ironimus]

При выделении немного криво. Но ничего страшного, этого никто не заметит, если не будет смотреть ваш сайт из телефона с мелким расширением экрана.

[Catherine]

1.Раз уж речь идет от адаптивности, то не стоит так делать:

h2 {font-family: Open Sans;position: absolute;left: 45%;top: 30%;}

Как минимум, при уменьшении ширины экрана на мобильных версиях заголовок не по центру по горизонтали. Да и стоит подумать, что будет на других страницах, когда заголовок будет в 2 строки, например.

И неплохо бы указать не только имя конкретного шрифта, но и альтернативные варианты, и указать тип (это общее замечание, не имеющее отношения к адаптивности).

 

2. Очень некрасиво выглядит страница без отступов по бокам, особенно на мобильных устройствах.

 

3. При наведении на элементы блока "Categories" появляется подсветка, на которой текст становится нечитабельным, если на него не навести курсор. То-есть, цвет фона при наведении на область элемента сливается с текстом, пока не наведешь на сам текст.

 

4. При ширине экрана меньше 1024рх элементы resent-sidebar'a наползают следующим образом: 

5. Текст "notiy me of followup comments via e-mail" должен быть заключен в label, так как это именно метка для конкретного чекбокса. При уменьшении ширины экрана этот текст переносится очень некрасиво, прилипая к левому краю экрана из-за большого маргина у кнопки справа.

[Memphis]

При выделении немного криво. Но ничего страшного, этого никто не заметит, если не будет смотреть ваш сайт из телефона с мелким расширением экрана.

А на каком разрешении такое? У меня выставлено меню во всю ширину экрана, если разрешение меньше 380px.

 

1.Раз уж речь идет от адаптивности, то не стоит так делать:

h2 {font-family: Open Sans;position: absolute;left: 45%;top: 30%;}

Как минимум, при уменьшении ширины экрана на мобильных версиях заголовок не по центру по горизонтали. Да и стоит подумать, что будет на других страницах, когда заголовок будет в 2 строки, например.

И неплохо бы указать не только имя конкретного шрифта, но и альтернативные варианты, и указать тип (это общее замечание, не имеющее отношения к адаптивности).

 

2. Очень некрасиво выглядит страница без отступов по бокам, особенно на мобильных устройствах.

 

3. При наведении на элементы блока "Categories" появляется подсветка, на которой текст становится нечитабельным, если на него не навести курсор. То-есть, цвет фона при наведении на область элемента сливается с текстом, пока не наведешь на сам текст.

 

4. При ширине экрана меньше 1024рх элементы resent-sidebar'a наползают следующим образом: 

5. Текст "notiy me of followup comments via e-mail" должен быть заключен в label, так как это именно метка для конкретного чекбокса. При уменьшении ширины экрана этот текст переносится очень некрасиво, прилипая к левому краю экрана из-за большого маргина у кнопки справа.

1.Исправил

2.Исправил

3.Вот как это сделать не знаю? Я мучался так и не смог сделать, чтобы при наведении на <li>,а не на <a> текст менялся на белый

4.Исправил

5.Исправил

Edited May 22, 2014 by Memphis

[xzarxzes]

3.Вот как это сделать? Я мучался так и не смог сделать, чтобы при наведении на <li>,а не на <a> текст менялся на белый

Задать стили для ссылки display: inline-block и line-height: высота родителя. А если вам надо именно чтобы при наведении на <li> менялся текст на белый то li:hover a {color: white }, хотя я не вижу в этом смысла. http://jsfiddle.net/xzarxzes/VWEDc/

[Memphis]

 

3.Вот как это сделать? Я мучался так и не смог сделать, чтобы при наведении на <li>,а не на <a> текст менялся на белый

Задать стили для ссылки display: inline-block и line-height: высота родителя. А если вам надо именно чтобы при наведении на <li> менялся текст на белый то li:hover a {color: white }, хотя я не вижу в этом смысла. http://jsfiddle.net/xzarxzes/VWEDc/

 

Ок. спс

[webmasterFast]

Ничего необычного, все как у всех.

[oke11o]

Если не про адаптивность а про верстку, то тут ховер состояния немного неправильно работает.

[Memphis]

Если не про адаптивность а про верстку, то тут ховер состояния немного неправильно работает.

 

Исправил.