Подскажите, мастера, по такому вопросу. Мучаю тему адаптивного дизайна.
(Это первый мой сайт с использованием css, поэтому легко и непринужденно, как на табличной верстке, не получается)
И есть у меня в стилях вот что:
header {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #9cb6be;
border-radius: 7pt;
background: #e4ebed;
}
И этот замечательный блок, в котором визуально имеется 2 строки, меня не устраивает одним своим качеством. Он не адаптивный по высоте. То есть при просмотре на устройствах с экраном меньше 650px, в блоке вместо двух строк отображается только одна.
Предполагаю, что помимо min-height: 100px;, нужно добавить что-то еще, чтобы в этом блоке на любых устройствах было видимым все его содержимое.
А что именно не могу найти. Уже все, что поисковик выдает на мои запросы пересмотрела. Решения не нашла.
Я - чайник, признаю. Научите, как решить мою задачу.
Заранее спасибо за все рекомендации по делу.
(Это первый мой сайт с использованием css, поэтому легко и непринужденно, как на табличной верстке, не получается)
И есть у меня в стилях вот что:
header {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #9cb6be;
border-radius: 7pt;
background: #e4ebed;
}
И этот замечательный блок, в котором визуально имеется 2 строки, меня не устраивает одним своим качеством. Он не адаптивный по высоте. То есть при просмотре на устройствах с экраном меньше 650px, в блоке вместо двух строк отображается только одна.
Предполагаю, что помимо min-height: 100px;, нужно добавить что-то еще, чтобы в этом блоке на любых устройствах было видимым все его содержимое.
А что именно не могу найти. Уже все, что поисковик выдает на мои запросы пересмотрела. Решения не нашла.
Я - чайник, признаю. Научите, как решить мою задачу.
Заранее спасибо за все рекомендации по делу.