Memphis

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

Recommended Posts

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

.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);}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

Edited by akorshun

Share this post


Link to post
Share on other sites

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

а для 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);}

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

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

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

 

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

 

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

 

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

1400719110-clip-161kb.jpg

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

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

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

 

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

 

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

 

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

1400719110-clip-161kb.jpg

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

1.Исправил

2.Исправил

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

4.Исправил

5.Исправил

Edited by Memphis

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

 

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

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

 

Ок. спс

Share this post


Link to post
Share on other sites

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

C8yEkmt.png

Share this post


Link to post
Share on other sites

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

 

Исправил.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Неугомонный
      Всем привет, есть документация под нормы расширения экранов @media screen , где обозначено до скольки PX я могу скажем так воображать себе в голове под что я верстаю телефон/планшет/пк ?
    • By toplife
      Интернет-маркетинговое агентство Top-Life. Мы ищем в команду Junior Web разработчика.
       
      Что мы ожидаем от кандидата:
      Навыки HTML5, CSS3, JavaScript; Знания PHP5-7‚ MySQL‚ jQuery, ajax; Опыт в верстке; Наличие опыта разработки и знание различных CMS (1С Битрикс, UMI, ModX, WordPress и другие) будет плюсом; Опыт работы и наличие портфолио приветствуется; Умение и желание работать в команде; Аккуратность (осмысленность) в работе.  
      Задачи, которые вам предстоит решать:
      Современная адаптивная кроссбраузерная верстка (HTML5+CSS3); Применение готовой верстки к CMS (1С-Битрикс, Wordpress);  
      Условия:
      Оформление по ТК РФ Заработная плата: от 20 000 до 40 000 руб;  График работы: 5/2 с 10.00–19.00, обед с 14.00–15.00; На территории работодателя; Молодой‚ профессиональный коллектив; Корпоративные мероприятия; Чай, кофе и печеньки с нас; Мы даем возможность не просто работать‚ а создавать и развиваться. Для связи:
      Антон
      тел: 8(981)897-42-46
      mail: a.majstrenko@top-life.su
      hh: https://spb.hh.ru/vacancy/30397980
  • Member Statistics

    46,457
    Total Members
    3,128
    Most Online
    Nip
    Newest Member
    Nip
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.