Как сделать адаптивный футер, чтобы под него контент не убегал?и он на него не налазил?

Уже перепробовал разное позиционирование все равно футер на мобильных устройствах вылазит посередке над контентом( как сделать чтобы он появлялся только после прокрутки всего контента, ли бо если контента мало то просто был внизу? (касается только мобильных устройств)

.footer{
  box-shadow:0 0px 32px -12px #737373;
  background: #2d343d;
  color: #fff;
  padding:5px 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

Для наглядности зайдите пожалуйста с мобильника на сайт Geekend.ru