Ссылки не работают, если нижний колонтитул из трех столбцов преобразован в нижний колонтитул из одного столбца

Question

У меня проблема с моим сайтом. (www.cemf.ir). Нижний колонтитул состоит из трех столбцов, и все работает нормально (ссылки активны), когда в нем три столбца. Однако, когда я изменяю размер браузера и ширина становится меньше, количество столбцов в нижнем колонтитуле становится единым, и работают только ссылки в последней части нижнего колонтитула. Я думаю, что что-то не так с классом .column-wrapper в css, когда ширина экрана становится меньше. Может кто-нибудь помочь мне?

Answer 1

Установка числа с плавающей точкой последней оболочки столбца должна работать.

@media screen and (max-width: 767px)
.site-footer.three-col .column-wrapper:last-child {
    float: left;
}

Answer 2

Я смог найти для этого хорошее решение. Я использовал свойство z-index, как вы видите ниже:

@media screen and (max-width: 767px)

.column-wrapper:last-child {
      z-index: 1000;
  }

  .column-wrapper:nth-child(2) {
      z-index: 1001;
  }

  .column-wrapper:first-child {
      z-index: 1002;
  }

z-index поместил слой столбцов на слой, и проблема последнего обертки столбца была решена, так как теперь он находится под всеми столбцами в нижнем колонтитуле.

Answer 3

По какой-то странной причине, причину которой я не могу выяснить, самый последний .column-wrapper в нижнем колонтитуле покрывает (хотя и прозрачный) почти весь экран на мобильных устройствах, включая большинство других элементов нижнего колонтитула, а также не позволяет любой щелчок мышью.

В инспекторе кода браузера добавление следующего параметра CSS сделало ссылки в других элементах нижнего колонтитула интерактивными:

#recent-posts-5 {
 pointer-events: none;
}