Архив блога Blogger отображается на половине страницы на экранах мобильных устройств

Question

Результаты поиска в этом архиве блога Blogger, например https://www.neuroscientia.com/2018/08/, отображают сообщения только на половине страницы, в то время как другая половина остается пустой, особенно на экранах мобильных устройств. Я настроил исходный код HTML и не смог понять, что вызвало это.

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

Аналогичная тема, которую я пробовал: Статические страницы Blogger отображают содержимое на половине страницы

Блог размещен в Blogger. Пожалуйста, мне нужна ваша помощь при отображении списка результатов поиска в архиве блогов на полном экране для всех устройств.

Answer 1

Поскольку .blog-posts-wrapper имеет float: left, если вы хотите, чтобы они оставались в центре на экранах мобильных устройств, вы должны установить float: none; margin: auto

@media (max-width: 767px) {
  .blog-posts-wrapper {
      float: none;
      margin: auto;
  }
}

OR

Если вы хотите, чтобы они были на полную ширину на мобильных экранах, установите:

@media (max-width: 767px) {
  .blog-posts-wrapper {
      width: 100%;
  }
}

Answer 2

В Коде есть эта команда:

@media only screen and (max-width: 755px)
   .sidebar-wrapper1 {
      display: none;
}

Выключите это, и правая колонка не исчезнет!

Или, если вы хотите, чтобы оставшийся столбец стал шириной 100%,

    .blog-posts-wrapper 

установлено на

        width: 48%;

так что вам нужно будет изменить это на 100%.

редактировать:

    @media only screen and (max-width: 755px) {
         .blog-posts-wrapper  {
             width:100%;
         }
    }

если это все еще не работает, добавьте изменение в ширину: 100%! Важный;