Страница 1 из 11
Форум » Архив » Архив » Адаптивная шапка
Адаптивная шапка
Dohsters Offline
Проверенный
0
Дата: Суббота, 07.11.2015, 16:21 | Сообщение # 1
Доброго времени суток знатокам сайтостроения!

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

При нормальном разрешении экрана:



И при оконном режиме браузера (или просмотре с планшета/телефона)



Html конструкция:

Код

<div class="rubber-class">

    <div class="header">
    Здесь Логотип + Другая инфа
    </div>
    
</div>


И соответственно css:

Код

    .rubber-class{
    width: 100%;
    background: #4C6DC8;}
    
    .header{
    height: 150px;
    width: 1150px;
    height: 85px;
    margin: 0px auto;}



Как сделать чтобы блок с классом .rubber-class растягивался по ширине на 100% всегда и на всех разрешениях?
Профиль
kefir Offline
Проверенный
6
Дата: Понедельник, 09.11.2015, 22:36 | Сообщение # 2
Код

   .header{
    height: 150px;
    width: 80%;
    height: 85px;
    margin: 0px auto;}


Профиль
Dohsters Offline
Проверенный
0
Дата: Вторник, 10.11.2015, 17:19 | Сообщение # 3
Зачем?
1. Мне нужно чтобы класс .rubber растягивался.
2. В чем фишка использовать 80%. Не понял, честно.


Сообщение отредактировал Dohsters - Вторник, 10.11.2015, 17:30
Профиль
Montegor Offline
Проверенный
15
Дата: Вторник, 10.11.2015, 18:37 | Сообщение # 4
kefir прав, вот демо, и для header доавил цвет, чтобы было видно.

Профиль
GTHEME Offline
Проверенный
2
Дата: Вторник, 10.11.2015, 22:35 | Сообщение # 5
Код
@media screen and (max-width:1150px) {
    .header{
      width: 100%;}
}


Добавлено (10.11.2015, 22:35)
---------------------------------------------
Без медиа-запроса:

Код
.header {
    display: table;
    width: 100%;
    max-width: 1150px;
    min-height: 85px;
    margin: 0px auto;}


uPartner PRO. | Разработка сайтов на uCoz.

Сообщение отредактировал GTHEME - Вторник, 10.11.2015, 22:37
Профиль
Dohsters Offline
Проверенный
0
Дата: Среда, 18.11.2015, 21:11 | Сообщение # 6
Спасибо, будет время проверю способы и апну тему )

Добавлено (18.11.2015, 21:11)
---------------------------------------------
Ни один предложенный метод не работает. При просмотре с маленького разрешения экрана проблема не решается.

Цитата Montegor ()
kefir прав, вот демо, и для header доавил цвет, чтобы было видно.


Объяснить сможешь почему именно ширина должна быть в 80% ?
Профиль
Montegor Offline
Проверенный
15
Дата: Среда, 18.11.2015, 22:21 | Сообщение # 7
Dohsters, пропорциональное соотношение. Подвигай в демо ширину окна result

Профиль
Dohsters Offline
Проверенный
0
Дата: Воскресенье, 22.11.2015, 17:32 | Сообщение # 8
Проблема была не в шапке, а в отсутствии у меня умения правильно адаптировать сайт под различные разрешения экрана. Сейчас проблема решена. Спасибо за помощь. тему можно закрывать.
Профиль
Форум » Архив » Архив » Адаптивная шапка
Страница 1 из 11
Поиск: