Перейти к содержанию
SK999

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

Рекомендуемые сообщения

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

 

5944720.png

Изменено пользователем tim21701

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Используй media queris

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

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

 /*итд*/

}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

.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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.