Вопрос к параметру ширины: Сайт (через tumblr) не отображается на 100% на мобильных устройствах

Этот тумблер (johannesjakobi.tk), который я использую в качестве веб-сайта, хорошо работает в настольных веб-браузерах, но на мобильных устройствах основные элементы не имеют желаемого широкого диапазона (заполнение экрана в идеале на 95%). Это проблема с каким-либо параметром «ширина»?

Вот как это выглядит в мобильном браузере Google- и сафари-.

Большое спасибо за ваши знания!

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
56
1

Ответы 1

Я думаю, что проблема в вашей навигации. Изображения, кажется, изменяются до ширины области просмотра.

Для навигации я бы либо реализовал это:

#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;
    }
}

См. прикрепленные изображения для справки.

display inline-block

display block

Спасибо большое, Ларби! Я попробую это на следующей неделе! К сожалению, пока не могу проголосовать. Но ваш комментарий кажется полезным!

ponzoh-oh 28.03.2019 17:48

Другие вопросы по теме