[РЕШЕНО] Помогите с адаптивным дизайном!

[SK999]

Здравствуйте! У маня шаблон с адаптивным дизайном, все вроде бы работало хорошо, но после того как я вывел контакты в шапку, начались проблемы. На скрине это очень хорошо видно, когда отрываешь не на весь экран сайт, так е когда люди открывают сайт на планшетах, контакты не адаптируется под размер и поиск залазит на них(((
Кто может помогите пожалуйста, я не профессионал, сам не смогу сделать, пытался искать в интернете, но нормально инфы нету(

 

Змінено 19 вересня 2014 користувачем tim21701

[pashast]

Используй media queris

/*для экранов меньше 1200пикс по ширине*/

@media screen and (max-width: 1200px) {
 
 #header #contacts {
   top: 0;
 }

 /*итд*/

}

[markimax]

Адаптивная конструкция блоков:

.record_columns {
            /* display: table; */
            width: 100%;
            -moz-box-sizing: border-box;      /* фикс проблемы для Firefox       */
            -webkit-box-sizing: border-box;   /* фикс для старых Chrome и Safari */
            box-sizing: border-box;           /* не поддерживается в CSS2        */
            margin-left: 0;
            margin-right: 0;
            text-align: center;
}

        /* колонки */
.record_columns > div,
.record_columns > noindex > div {
            display: inline-block;
            vertical-align: top;
            max-width: 180px;
            width: 100%;
            vertical-align: top;
            text-align: left;
            margin-right: 3px;
            margin-bottom: 3px;
            position: relative;
            -moz-box-sizing: border-box;      /* фикс проблемы для Firefox       */
            -webkit-box-sizing: border-box;   /* фикс для старых Chrome и Safari */
            box-sizing: border-box;

}

<div class="record_columns">
<div>....</div>
<div>....</div>
<div>....</div>
<div>....</div>
<div>....</div>
</div>

Разбейте контакты по блокам

 

Кстати вот так надо делать адаптивную конструкцию сайтов, а не через JS или @media screen

Этот метод гибче

[Galyanoff]

Сочетание резины и медиа запросов как раз и дает адаптивную конструкцию.