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

Question

Я делаю не адаптивную, а обычную фиксированую верстку. Проблема с меню.

На ПК все выглядит таким образом:

На мобилке:

.header_menu ul li a {
    text-decoration: none;
    text-transform: uppercase;
    color: black;
}

.header_menu ul li a.posttypes {
    color: #b59f5b;
}

.header_menu ul li a.posttypes:after {
    content:"";
    border-width: 4px;
    border-color: #b59f5b transparent transparent transparent;
    border-style: solid;
    position: relative;
    top: 11px;
    left: 3px;
}

.header_menu > ul .menu_el:after {
    content:"";
    border-width: 4px;
    border-color: black transparent transparent transparent;
    border-style: solid;
    position: relative;
    top: 11px;
    left: 3px;
}

.header_menu > ul li {
    list-style: none;
    margin-right: 35px;
}

.header_menu > ul li:last-child {
    margin-right: 0px;
}

.header_menu > ul li, .logo_icons {
    display: inline-block;
}

.header_menu > ul li ul {
    display: none;
    position: absolute;
}

.header_menu ul li:hover > ul{
    display: block;
}


.header_menu ul li ul li {
    display: block;
    padding-top: 20px;
}

<div class="header_menu">
                <ul>
                    <li class="menu_el"><a href="">home</a>
                        <ul>
                            <li><a href="">friendship</a></li>
                            <li><a href="">love</a></li>
                            <li><a href="">relationship</a></li>
                            <li><a href="">food</a></li>
                            <li><a href="">sport</a></li>
                        </ul>
                    </li>
                    <li class="menu_el"><a href="">features</a>
                        <ul>
                            <li><a href="">friendship</a></li>
                            <li><a href="">love</a></li>
                            <li><a href="">relationship</a></li>
                            <li><a href="">food</a></li>
                            <li><a href="">sport</a></li>
                        </ul>
                    </li>
                    <li class="posttypes"><a class="posttypes" href="">posttypes</a>
                        <ul>
                            <li><a href="">friendship</a></li>
                            <li><a href="">love</a></li>
                            <li><a href="">relationship</a></li>
                            <li><a href="">food</a></li>
                            <li><a href="">sport</a></li>
                        </ul>
                    </li>
                    <li class="menu_el"><a href="">pages</a>
                        <ul>
                            <li><a href="">friendship</a></li>
                            <li><a href="">love</a></li>
                            <li><a href="">relationship</a></li>
                            <li><a href="">food</a></li>
                            <li><a href="">sport</a></li>
                        </ul>
                    </li>
                    <li class="menu_el"><a href="">categories</a>
                        <ul>
                            <li><a href="">friendship</a></li>
                            <li><a href="">love</a></li>
                            <li><a href="">relationship</a></li>
                            <li><a href="">food</a></li>
                            <li><a href="">sport</a></li>
                        </ul>
                    </li>
                    <li class="menu"><a href="">contact</a></li>
                </ul>
            </div>

Как вариант можно, конечно, не заморачиваться, а для мобилки просто сделать не горизонтальное меню, а бургер. Просто хотелось бы понять причину такого отображения. Почему все скачет?

Answer 1

Не стоит для .header_menu > ul .menu_el::after устанавливать position: relative и делать сдвиг в пикселях, это какой-то ужасный костыль вообще...

Первый вариант:

.header_menu > ul .menu_el {
    display: inline-block;
}
.header_menu > ul .menu_el > a,
.header_menu > ul .menu_el::after {
    display: inline-block;
    vertical-align: middle;
}
.header_menu > ul .menu_el::after {
    border-width: 4px;
    border-color: black transparent transparent transparent;
    border-style: solid;
    content:"";
    margin-left: 3px;
}

Второй вариант:

.header_menu > ul .menu_el {
    display: inline-block;
}
.header_menu > ul .menu_el > a {
    display: block;
    padding-right: 15px;
    position: relative;
}
.header_menu > ul .menu_el > a::after {
    border-width: 4px;
    border-color: black transparent transparent transparent;
    border-style: solid;
    content:"";
    left: 100%;
    margin-left: 3px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Третий вариант - использовать flexbox, пример приводить не буду, просто лень гуглить, а на память все свойства не помню ибо сам пользуюсь небольшой библиотекой собственного написания.

БЛОГ НА HUSL

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

Ответы (1 шт):