Как решить проблему с адаптивный шапкой на мобильных устройствах?

Ссылка скопирована
CSS HTML PHP
21 апреля 2026 1 ответ

Я новичок в веб-верстке. Создаю шапку для сайта. На десктопной версии все работает ок, шапка адаптивная, меняет свои размеры. Но если открывать с телефона, шапка "генерируется" ровно по границы экрана. Если пролистать страницу вправо - просто пустая область, часть шапки отсутствует. Долго мучаюсь с этим. Подскажите пожалуйста, в какую сторону копать?
Адрес сайта
Мой код:

<style>     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); body {       font-family: Roboto;     }  header {       padding: 20px;       display: flex;       justify-content: space-between;       align-items: center;       background-image: linear-gradient(to bottom, #000000, #333333);       color: #fff;       position: relative;     }  .logo img {       width: 100%;     max-width: 110px;     }  .menu {       display: flex;       align-items: center;     }  .menu-item {       margin-right: 10px;       padding-right: 10px;       display: inline-block;     }  .menu-item::before {       content: "";       position: absolute;       bottom: -5px;       left: 0;       width: 100%;       height: 2px;       background-color: #fff;       transform: scaleX(0);       transition: transform 0.3s;     }  .menu-item:hover::before {       transform: scaleX(1);     }  .contact-buttons {       display: flex;         }  .contact-button {       margin-left: 8px;       padding: 5px;       border-radius: 50%;       color: #fff;       text-decoration: none;       font-weight: bold;       transition: background-color 0.3s;       position: relative;       overflow: hidden;     }  .contact-button img {      width: 100%;     max-width: 30px;     height: 100%;     max-height: 30px;     }  .contact-button:hover {       background-color: #ffffff;     }  .contact-button::before {       content: "";       position: absolute;       top: -100%;       left: 0;       width: 100%;       height: 100%;       background-color: rgba(255, 255, 255, 0.3);       transition: top 0.3s;     }   .contact-button:hover::before {       top: 0;     }      .menu-item a:active,     .menu-item a:visited {       outline: none;       color: inherit;       text-decoration: none;     }      .menu-item:not(:last-child) {       margin-right: 10px;       border-right: 1px solid #ffffff;       padding-right: 10px;     }      .menu-item a {       text-decoration: none;       position: relative;     }      .menu-item a::after {       content: '';       position: absolute;       bottom: -2px;       left: 0;       width: 100%;       height: 2px;       background-color: #ffffff;       transform: scaleX(0);       transform-origin: left;       transition: transform 0.3s ease-in-out;     }      .menu-item a:hover::after {       transform: scaleX(1);     }      /* Анимация частиц */     #particles-js {       width: 100%;       height: 100%; position: absolute;      }    </style>     <header> <div id="particles-js"></div>      <div class="logo">       <img src="https://driveimport.ru/wp-content/uploads/2023/06/logoc-1-2.svg">     </div>     <ul class="menu">       <li class="menu-item"><a href="http://auc.driveimport.ru/aj_neo?classic">Онлайн аукционы</a></li>       <li class="menu-item"><a href="http://auc.driveimport.ru/st?classic">Статистика продаж</a></li>       <li class="menu-item"><a href="http://auc.driveimport.ru/aj">Онлайн аукционы (OLD)</a></li>       <li class="menu-item"><a href="http://auc.driveimport.ru/aj_3">Статистика продаж (OLD)</a></li>       <li class="menu-item"><a href="http://driveimport.ru/kontakty">Оставить заявку</a></li>     </ul>     <div class="contact-buttons">       <a class="contact-button" href="https://api.whatsapp.com/send/?phone=79958700025&text=Здравствуйте%21+Меня+интересует&type=phone_number&app_absent=0/">         <img src="https://driveimport.ru/wp-content/uploads/2023/06/4017334_circle_logo_media_network_social_icon.svg" alt="WhatsApp">       </a>       <a class="contact-button" href="https://t.me/driveimportvl">         <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Telegram_2019_Logo.svg" alt="Telegram">       </a>       <a class="contact-button" href="https://www.youtube.com/channel/UCfqYbuRoXJo8JiwCpele8rw">         <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/YouTube_social_red_circle_%282017%29.svg" alt="YouTube">       </a>     </div>   </header>     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>   <script>     particlesJS('particles-js', {       particles: {         number: { value: 80, density: { enable: true, value_area: 800 } },         color: { value: '#ffffff' },         shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 }, image: { src: 'img/github.svg', width: 100, height: 100 } },         opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } },         size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.2, sync: false } },         line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1 },         move: { enable: true, speed: 5, direction: 'none', random: false, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } }       },       interactivity: {         detect_on: 'canvas',         events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true },         modes: {           grab: { distance: 400, line_linked: { opacity: 1 } },           bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },           repulse: { distance: 200, duration: 0.4 },           push: { particles_nb: 4 },           remove: { particles_nb: 2 }         }       },       retina_detect: true     });   </script>

<style> @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); body { font-family: Roboto; } header { padding: 20px; display: flex; justify-content: space-between; align-items: center; background-image: linear-gradient(to bottom, #000000, #333333); color: #fff; position: relative; } .logo img { width: 100%; max-width: 110px; } .menu { display: flex; align-items: center; } .menu-item { margin-right: 10px; padding-right: 10px; display: inline-block; } .menu-item::before { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: #fff; transform: scaleX(0); transition: transform 0.3s; } .menu-item:hover::before { transform: scaleX(1); } .contact-buttons { display: flex; } .contact-button { margin-left: 8px; padding: 5px; border-radius: 50%; color: #fff; text-decoration: none; font-weight: bold; transition: background-color 0.3s; position: relative; overflow: hidden; } .contact-button img { width: 100%; max-width: 30px; height: 100%; max-height: 30px; } .contact-button:hover { background-color: #ffffff; } .contact-button::before { content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.3); transition: top 0.3s; } .contact-button:hover::before { top: 0; } .menu-item a:active, .menu-item a:visited { outline: none; color: inherit; text-decoration: none; } .menu-item:not(:last-child) { margin-right: 10px; border-right: 1px solid #ffffff; padding-right: 10px; } .menu-item a { text-decoration: none; position: relative; } .menu-item a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #ffffff; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-in-out; } .menu-item a:hover::after { transform: scaleX(1); } /* Анимация частиц */ #particles-js { width: 100%; height: 100%; position: absolute; } </style> <header> <div id="particles-js"></div> <div class="logo"> <img src="https://driveimport.ru/wp-content/uploads/2023/06/logoc-1-2.svg"> </div> <ul class="menu"> <li class="menu-item"><a href="http://auc.driveimport.ru/aj_neo?classic">Онлайн аукционы</a></li> <li class="menu-item"><a href="http://auc.driveimport.ru/st?classic">Статистика продаж</a></li> <li class="menu-item"><a href="http://auc.driveimport.ru/aj">Онлайн аукционы (OLD)</a></li> <li class="menu-item"><a href="http://auc.driveimport.ru/aj_3">Статистика продаж (OLD)</a></li> <li class="menu-item"><a href="http://driveimport.ru/kontakty">Оставить заявку</a></li> </ul> <div class="contact-buttons"> <a class="contact-button" href="https://api.whatsapp.com/send/?phone=79958700025&text=Здравствуйте%21+Меня+интересует&type=phone_number&app_absent=0/"> <img src="https://driveimport.ru/wp-content/uploads/2023/06/4017334_circle_logo_media_network_social_icon.svg" alt="WhatsApp"> </a> <a class="contact-button" href="https://t.me/driveimportvl"> <img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Telegram_2019_Logo.svg" alt="Telegram"> </a> <a class="contact-button" href="https://www.youtube.com/channel/UCfqYbuRoXJo8JiwCpele8rw"> <img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/YouTube_social_red_circle_%282017%29.svg" alt="YouTube"> </a> </div> </header> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <script> particlesJS('particles-js', { particles: { number: { value: 80, density: { enable: true, value_area: 800 } }, color: { value: '#ffffff' }, shape: { type: 'circle', stroke: { width: 0, color: '#000000' }, polygon: { nb_sides: 5 }, image: { src: 'img/github.svg', width: 100, height: 100 } }, opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 3, random: true, anim: { enable: false, speed: 40, size_min: 0.2, sync: false } }, line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1 }, move: { enable: true, speed: 5, direction: 'none', random: false, straight: false, out_mode: 'out', bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: 'canvas', events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 }, repulse: { distance: 200, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true }); </script>

Спасибо!

Дополнительно:

У Вас не в шапке проблема. А в контенте.
Контент не адаптивный и на мобильном шире чем вьюпорт.

  • и, О УЖАС !!!, зачем Вы верстаете на таблицах? Где Вы это увидели? В книге за 2000 год?
    Срочно бросить всё и пойти учить вёрстку на чём-то по новее. Хотя бы за ~2018...

    А ещё вот
    https://developer.mozilla.org/ru/docs/Learn

    Из книг, например, Отзывчивый дизайн на HTML5 и CSS3 для любых устройств. 3-е изд. [2022] Бен Фрэйн

    Курсы на HTML Academy. В том числе бесплатные.

  • Вадим, извините, дал не полную информацию. Контент на сайте и собственно сам сайт расположенный на поддомен auc - не мой. Это поставщик JPCenter, он предоставляет доступ. У меня там есть возможность правки только шапки и подвала. Основной сайт на WP driveimport.ru (хотя и там можно многое поругать).
    JPCentr используют многие компании, и делают адаптивную шапку под него. Я вот собственно пытаюсь, пока не выходит. Извините что сразу не дал всей информации.

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Дмитрий К. Ответ

    Для решения проблемы с адаптивной шапкой на мобильных устройствах, вам следует использовать медиа-запросы в CSS. Медиа-запросы позволяют задавать стили, которые будут применяться только при определенных условиях, таких как ширина экрана устройства.

    Вот пример того, как можно настроить адаптивную шапку на мобильных устройствах с использованием медиа-запросов:

    /* Стили для шапки на десктопе */
.header {
   background-color: #333;
   color: #fff;
   padding: 10px;
}
 
/* Стили для шапки на мобильных устройствах */
@media (max-width: 768px) {
   .header {
      background-color: #555;
      padding: 5px;
   }
}

    /* Стили для шапки на десктопе */ .header { background-color: #333; color: #fff; padding: 10px; } /* Стили для шапки на мобильных устройствах */ @media (max-width: 768px) { .header { background-color: #555; padding: 5px; } }

    В этом примере, стили для шапки на мобильных устройствах будут применяться только если ширина экрана устройства не превышает 768 пикселей. Вы можете настроить стили в медиа-запросах в соответствии с вашим дизайном и требованиями.

    Также убедитесь, что ваш HTML-код для шапки хорошо структурирован и использует правильные теги для элементов. Например, вы можете использовать элементы

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ