Що змінилось

Зверніть увагу на відсутність <meta name="viewport" content="width=device-width, initial-scale=1">. Відсутність цього запису блокує масштабування на мобільних пристроях. Також ми перевстановили ширину нашого контейнера.

Стосовно навігаційної панелі

Зверніть увагу, тут компоненти навігаційної панелі є досить складними, оскільки стилі для їх відображення потребують докладного і конкретного опису. Перевстановлення стилів, для забезпечення відображення на настільких комп'ютерах, є не настільки продуктивним або гладким як хотілося б. Просто майте на увазі, що потенційно можуть бути підводні камені, при створенні навігаційних панелей з цього прикладу.

Браузери, прокручування, та фіксовані елементи

Нечутливі шаблони проявляють ключовий недолік для фіксованих елементів. Будь-який фіксований компонент, у тому числі навігаційна панель, буде непіддатливим для прокручування, якщо оглядове вікно стає вужчим, ніж вміст сторінки. Іншими словами, при нечутливому контейнері шириною 970px та оглядовому вікні 800px, ви потенційно матимете 170px прихованого вмісту.

Немає способу обійти це, оскільки такою є поведінка браузерів початково. Єдиним рішенням є чутливий шаблон, або використання нефіксованих елементів.

Нечутлива система сітки

Одна третина
Одна третина
Одна третина