Page 237 - Сила CSS3 Освой новейший стандарт

Изменение макета для просмотра на мобильных устройствах • 237

.feature { padding-left: 70px; }
#feature-candy { background-image:
url(images/icon_candy_64-trans.png); }
#feature-pastry { background-image:
url(images/icon_pastry_64-trans.png); }
#feature-dessert { background-image:
url(images/icon_dessert_64-trans.png); }

Теперь раздел рекламируемых продуктов занимает меньше места по высоте и смо-
трится гармоничнее (рис. 6.17).

Рис. 6.17. Если в области рекламируемых продуктов уменьшить размер значков, то они
будут гармоничнее смотреться рядом с блоками текста на узком экране

Теперь взгляните на блок подписки на электронную рассылку. Текстовое поле за-
нимает всю ширину столбца, и рядом с ним на той же строке невозможно вывести
текст метки и кнопку подтверждения. Добавьте к медиазапросу следующие правила:
#form-newsletter * { display: inline; }
#form-newsletter input[type=text] { width: auto; }

Эти правила сжимают блок подписки на электронную рассылку (рис. 6.18). На экра-
нах мобильных устройств с портретной ориентацией кнопка Subscribe перемещается

www.trk.kg