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

Question

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

Вот как это выглядит в браузере google- и safari- .

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

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

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