Этот тумблер (johannesjakobi.tk), который я использую в качестве веб-сайта, хорошо работает в настольных веб-браузерах, но на мобильных устройствах основные элементы не имеют желаемого широкого диапазона (заполнение экрана в идеале на 95%). Это проблема с каким-либо параметром «ширина»?
Вот как это выглядит в мобильном браузере Google- и сафари-.
Большое спасибо за ваши знания!
Я думаю, что проблема в вашей навигации. Изображения, кажется, изменяются до ширины области просмотра.
Для навигации я бы либо реализовал это:
#top nav a {
display: inline-block;
}
Или, если вы просто хотите, чтобы это было для конкретной точки привязки медиа-запроса:
@media (max-width: 600px) {
#top nav a {
display: inline-block;
}
}
Или вы можете изменить свойство display
на block
. Это создаст каждый якорь как блочный элемент со 100% шириной. Я также добавил выравнивание текста по левому краю (я бы реализовал это только для мобильных устройств, так как в противном случае ваша навигация будет располагаться друг над другом, что имеет гораздо меньше смысла на рабочем столе).
@media (max-width: 600px) {
#top nav a {
display: block;
text-align: left;
}
}
См. прикрепленные изображения для справки.
Спасибо большое, Ларби! Я попробую это на следующей неделе! К сожалению, пока не могу проголосовать. Но ваш комментарий кажется полезным!