页脚不隐藏在较小的屏幕尺寸上

Question

I am trying to hide my footer for small devices and screens. Any thoughts on how I could do so? I had tried:

<div class="hidden-xs"> and

@media screen and (max-width: 600px) {
    .footer {
        visibility: hidden;
        display: none;
    }
}

Which were popular solutions online, but no luck. My code is below:

HTML

<footer>
    <div class="copyright"><p>Copyright; url 2021</p></div>
    <div class="location">Footer text</div>
    <div class="contact">WhatsUp@url.com</div>
</footer>

CSS

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: white;
    color: white;
    text-align: center;
    height: 80px;
    display: flex;
    justify-content: space-between;
    border-style: 1px thin solid red;
}

Answer 1

You are not hiding actual footer, but a div with a .footer class, which does not exist in your case.

Try this:

@media screen and (max-width: 600px) {
   footer {
      display: none;
   }
}

<footer>
    <div class="copyright"><p>Copyright; url 2021</p></div>
    <div class="location">Footer text</div>
    <div class="contact">WhatsUp@url.com</div>
</footer>

Now you are hiding a footer element.

Answer 2

Remove . from .footer css class

You use footer tag directly in css

@media screen and (max-width: 600px) {
    footer {
        visibility: hidden;
        display: none;
    }
}

Or add class="footer" to footer tag

Answer 3

If you use bootstrap , you can add this class d-block d-sm-none

<footer class="d-block d-sm-none">
    ...
</footer>

Or you can remove the . on your css

@media screen and (max-width: 600px) {
    footer {
        display: none;
    }
}

Or add class="footer" on your html

HTML

<footer class="footer">
    ...
</footer>

CSS

@media screen and (max-width: 600px) {
    .footer {
        display: none;
    }
}