Le pied de page ne se cache pas sur les petits écrans

Question

Je travaille sur une page de documentation technique pour Javascript dans le cadre d'un projet et mon pied de page utilisant des requêtes média ne se cache pas sur les petits écrans comme je le voudrais.

Des choses essayées :

• en changeant la position fixe, le pied de page disparaissait complètement.
• affichage : aucun ;
• hauteur et largeur fixées à 0px ;

Voici mon code SASS, il est lié correctement à la page html et au CSS.

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

@media only screen and (max-width:400px) {

    footer {
        display:none;

    }
}

<footer>
        Designed and Coded by: 
        <a href="what i linked" target="_blank">my name</a>
    </footer>

Je suppose qu'il s'agit de quelque chose de très simple que j'ai raté, mais je suis un débutant et j'ai pensé demander un coup de main.

Merci beaucoup, j'apprécie votre temps.

Answer 1

Ajouter <meta content="width=device-width, initial-scale=1" name="viewport" /> avant qu'il ne fonctionne pour vous.

    footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 5px;
}

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

    }
}

    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <footer>
        Designed and Coded by: 
        <a href="what i linked" target="_blank">my name</a>
    </footer>

Photo :

Answer 2

Use in head tag: 
<meta name="viewport" content="width=device-width, initial-scale=1" />

In CSS:
@media only screen and (max-width:400px) {
    footer {
        position: unset;
        display: none;

    }
}

Answer 3

Je pense que la réponse de James est une bonne solution, mais je voulais aussi demander une chose. Qu'est ce qu'un petit écran pour vous, un écran avec moins de 400px veuillez ne pas tenir compte de cette remarque, mais s'il s'agit d'un écran dont la largeur est inférieure à 1,5 m, vous pouvez l'ignorer. 400px hauteur puis changer en ceci :

@media only screen and (max-height:400px) {
    footer {
        display:none;
    }
}

Note : Il sera max-height au lieu de max-width .