footer responsive problème d'alignement

-1 : Tu as deux fois <footer class="site-footer"> ce qui est inutile étant donné qu'ils ont la meme utilité .
-2 : Si tu veux qu'en mobile ils se placent l'un sur l'autre, tu as juste à enlever le float sur les enfants et les mettre en display block.

Salut Héloïse,

Pour faire du responsive, oublie de coder en pixel, travaille dans d'autre unité comme vw, vh, %. Ainsi que ton écran fasse 1024px, 800 ou 1920, tu conçois une mise en page avec des proportions. Ce qui est plus simple, cela te fera gagner quelques lignes de code, plus besoin de coder des media-queries pour des tailles d'écrans spécifiques comme 320px, 480px, 620, 720, 800, 1024, 1920, etc.

Tu fixes ta mise en page d'une ligne jusqu'à une certaines largeur, et tu passes à la seconde mise en page juste après.

Je t'ai fait un exemple

Retravaille les bases du css qui sont essentielles surtout si tu vens des sites web.

Belle journée

Salut Héloïse

Voila un code minimaliste pour ce faire

<footer class="site-footer">
  <div class="foot1">...</div>
  <div class="foot2">...</div>
  <div class="foot3">...</div>
</footer>

.site-footer {
    display: flex;
    justify-content: space-between;
}

.foot1, .foot2, .foot3 {
    flex: 1 0 auto;
}

@media screen and (max-width: 800px) {
    .site-footer {
        flex-direction: column;
    }
}

Voila la démo sur codepen https://codepen.io/TokaLazy/pen/KZqovV