Изменение размера текстового поля (container)

Изменяем размер контейнераВ этой статье мы разберём как изменить размер текстового поля(container). Для внешнего вида сайта размер container имеет большое значение. Он может быль либо слишком большим, либо иметь меньшие, чем нам надо, размеры. Как всегда будем пользоваться консолью для просмотра кода элемента. Как пользоваться консолью читайте здесь. Для всех примеров я использую стандартный шаблон Joomla – Protostar. Всё это применимо к любому шаблону, т.к. правила для CSS одинаковы.


 Наводим курсор на текстовое поле, нажимаем правую клавишу мыши и выбираем исследовать элемент. Нас интересует строка HTML <div class="container">. В других шаблонах может быть другое название, но обязательно будет присутствовать container.    Смотрим на правую часть консоли, где показании стили CSS. Нас интересуют параметры width. В моём случае это выглядит так: width: 960px;.    Т.е. ширина контейнера 960 пикселей. Если нам надо уменьшить размер, то просто изменим эти показатели. Если мы хотим увеличить ширину контейнера, то нам надо будет снять ограничение для ширины отображения. За ограничение ширины контейнера отвечает правило max-width.    Это правило присутствует практически во всех шаблонах. Мы его легко найдём в окошке со стилями CSS. В моём случае оно выглядит так: max-width: 960px;. Для увеличения размера контейнера мне надо изменить показатели width и max-width. Показатели max-width должны быть равны или больше планируемого размера.
 Увеличим ширину контейнера на 100 пикселей. Задаём такие параметры: width: 1060px;, max-width: 1100px; Теперь мы имеем текстовое поле нужных размеров.

Так же читайте: Как изменить цвет текстового поля