@Ste11

При адаптивной верстке сильно большой экран!?

Здравствуйте, делаю адаптивную верстку для одного проекта, так вот уже сделал
burger menu

Но на мобилках вот такая беда:5fca8944d70e4085857261.png

Как видно слишком большие отступы, проверил уже всё!!! Не могу понять почему так происходит!!

Подскажите, кто знает, как это исправить?

Вот вёрстка меню:
<header class="header">
        <div class="container">
            <div class="header__body">
                <a class="header__logo">
                    <img src="<?php bloginfo('template_url'); ?>/assets/image/logo.jpg">
                </a>

            <div class="header__burger">
                <span></span>
            </div>
                <nav class="header__menu">
                    <ul class="header__list" id="header__list">
                        <?php
                        wp_nav_menu( [
                            'theme_location'  => 'top',
                            'menu'            => '',
                            'container'       => null,
                            'echo'            => true,
                            'fallback_cb'     => 'wp_page_menu',
                            'menu_class' => 'header__list',
                            'menu_id' => 'header__list'
                        ] );
                        //?>
                    </ul>
                </nav>
            </div>
        </div>
    </header>


Вот код css(не media):
.container {
	max-width: 1180px;
	margin: 0px auto;
	padding: 0 10px;
}

.header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 50;
}
.header:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: steelblue;
	z-index: 2;
}
.header__body {
	position: relative;
	display: flex;
	justify-content: space-between;
	height: 80px;
	align-items: center;
}
.header__logo {
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	z-index: 3;
}
.header__logo img {
	width: 70px;
	height: 70px;
	display: block;
}
.header__list {display: flex;position: relative;z-index: 2;}
.header__list li {
	list-style: none;
	margin: 0px 0px 0px 20px;
}
.header__list li a {
	color: white;
	text-transform: uppercase;
	text-decoration: none;
}
.header__burger {
	display: none;
}


А вот мой media запрос:
@media (max-width: 767px) {
    .header__burger {
        display: block;
        position: relative;
        width: 30px;
        height: 20px;
        z-index: 3;
    }
    .header__burger span {
        position: absolute;
        background: white;
        left: 0;
        width: 100%;
        height: 2px;
        top: 9px;
    }
    .header__body {
        height: 50px;
    }
    .header__logo img {
        width: 45px;
        height: 45px;
        display: block;
    }
    .header__burger:before,
    .header__burger:after {
        content: '';
        background: white;
        position: absolute;
        width: 100%;
        height: 2px;
        left: 0;
    }
    .header__burger:before {
        top: 0;
    }
    .header__burger:after {
        bottom: 0;
    }

    .header__menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: lightseagreen;
        padding: 70px 10px 20px 10px;
    }
    .header__list {
        display: block;
    }
    .header__list li {
        margin: 0px 0px 20px 0px;
    }
}
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
alex4answ
@alex4answ
TL: DR;
Обычное такое происходит в следующем случае:

На странице что-то не адаптивно и "распирает" экран на максимум.
У меню абсолютное позиционированние, оно занимает 100% ширины
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы