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