Удаление класса на небольших устройствах с помощью медиа-запросов

---

Так что у меня проблема с нижним колонтитулом.

Поскольку на некоторых страницах отсутствует контент, нижний колонтитул не будет прилипать к нижней части.

Я исправил это, добавив класс bootstrap "fixed-bottom".

Это сработало!

Но теперь проблема в том, что на мобильных устройствах нижний колонтитул скрывает половину содержимого страницы.

Я проверил его на инструментах разработчика Chrome и увидел, что, когда я удаляю класс с фиксированным нижним колонтитулом из нижнего колонтитула, нижний колонтитул больше не скрывает содержимое!

Что я уже пробовал:

Я попытался добавить медиа-запрос нижнего колонтитула без класса "fixed - bottom" - в основном идентичный нижний колонтитул, но без класса.

@media only screen and (max-width: 600px) {
    <footer style="background-color: orange;">
        <div class="container-fluid">
            <br />
            
            
            
            
        </div>
        <br />
        <div class="container-fluid">
            <p> Veselin Dimitrov's Weather App</p>
        </div>
    </footer>
  }

Но, похоже, он не удаляет содержимое.

Все, что мне нужно сделать, это удалить нижний колонтитул на небольших устройствах, и он будет отсортирован!

---