Remove a class on smaller devices with media queries

See more:

CSS

So I have a problem with my footer.

Because there is a lack of content on some pages, the footer wouldn't stick to the bottom.

I fixed this by adding the bootstrap class "fixed-bottom".

It worked!

But now the problem is that, on mobile devices, the footer is hiding half of the page's content.

I inspected it on Chrome Developer tools and saw that, when I remove the fixed-bottom class from the footer, the footer no longer hides the content!

What I have tried:

I tried adding a media query of the footer WITHOUT the class "fixed-bottom" - basically the identical footer, but without the class.

@media only screen and (max-width: 600px) {
    <footer style="background-color: orange;">
        <div class="container-fluid">
            <br />
            class="fa fa-facebook fa-3x"__^
            ^__i class="fa fa-instagram fa-3x">
            ^__i class="fa fa-linkedin fa-3x">
        </div>
        <br />
        <div class="container-fluid">
            <p>^__i class="fa fa-copyright"> Veselin Dimitrov's Weather App</p>
        </div>
    </footer>
  }

But it doesn't seem to be removing the content.

All I need to do is remove the footer on smaller devices and it's sorted!