Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


 Поделиться

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

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

 

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

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

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

  • 2 недели спустя...

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

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

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