Проблема с размещением значка меню на странице мобильной версии
Я хочу и пытаюсь расположить значок меню у ее правого края так, чтобы он был равен правому краю изображения внизу. Я не знаю почему, но этот значок не двигается :P. В чем дело? Как я могу это исправить? Добавляю, как это выглядит: введите сюда описание изображения
Я попытался добавить поля слева: auto в классе навигации по значкам, display flex в контейнере. Затем либо flex растет на одном дочернем элементе, чтобы он занимал как можно больше места. И я попытался добавить justify-content: space-between. Но ни один из этих способов не работает. Если это не работает, значит, что-то не так со структурой кода (html или где-то еще свойство css переопределяет его), но я не могу найти, в чем дело. Это мой github: https://github.com/NatKacz99/news-homepage. Это живая страница: https://natkacz99.github.io/news-homepage/
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
В вашем навигационном CSS нет ничего плохого. При определенной ширине экрана, т. е. 375px, значок меню устанавливается справа от панели навигации. Хотя проблема в вашем .container классе. Вы установили для него некоторые отступы, и общая ширина контейнера превышает фактическую ширину области просмотра. В результате получается horizontal scroll. Из-за этого прокрутки вы не можете представить себе, что значок меню nav действительно находится на своем месте.
Вы можете изменить CSS в style.css следующим образом, и все готово.
@media(max-width: 375px) {
/*
* Existing code
*/
.container {
/*Existing styling*/
padding-inline: 0px;
}
PS Вы должны получить следующий результат:
Если вы правильно поняли ваш запрос, вам нужно поместить ЗНАЧОК в правую часть экрана.
После проверки вашего кода я предлагаю внести изменения в файл CSS:
header {
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.icon-navigation {
position: absolute;
top: 0;
right: 0;
padding: 10px;
}
Проверьте этот вывод:
Надеюсь, это поможет. [Вывод]: https://i.sstatic.net/WfrNTJwX.png
Я хочу получить такой же эффект, как на картинке. Я исправил свой CSS-файл в соответствии с тем, что вы предложили в функции @media, но я не получил такого эффекта.
пожалуйста, вставьте сюда свой код и, если возможно, приведите воспроизводимый пример, так как мало кто будет переходить по сторонним ссылкам.