CSS - Requêtes multimédias - éléments ne s'empilant pas/flottant correctement

Question

Je définis des requêtes de support pour les écrans de taille tablette et ma barre de navigation, le logo de l'en-tête et la section supérieure ne semblent pas vouloir s'empiler correctement. Si je fixe la position de la navigation, je perds le titre de la section ou si je mets la position de navigation comme statique, la barre de navigation essaie de se cacher derrière. Donc, quand je réduis à 680px ou au-dessous je reçois ce en haut de mon écran -

Ou ce -

Tout empile bien à 480px et au-dessous afin de ne pas sûr de ce que je fais mal. Voici mes questions des médias -

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

    nav { 

     float: none; 
     text-align: center; 
     padding-bottom: 10px; 
     padding-top: 10px; 

    } 

    nav a { 
    display: block; 
    border-bottom: 0; 


    } 

    #logo { 

    height: auto; 

    } 

    #logo img { 

    width: 200px; 
    height: 100px; 
    position: relative; 
    top: 0; 
    left: 21%; 
    } 


    section { 
     float: none; 
     height: auto; 
    } 
} 

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

    body { 
    max-width: 500px; 
} 


    header { 

    height: auto; 

    } 

    nav { 

    text-align: center; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    position: static; 

    } 

    nav a { 
    display: block; 
    border-bottom: 0; 


    } 

    nav a:hover { 
    background-color: rgba(0,0,0,0.6); 
    color: #fff; 
    } 

    #logo { 

    height: auto; 

    } 

    #logo img { 

    width: 200px; 
    height: 100px; 
    position: relative; 
    top: 0; 
    left: 21%; 
    } 


    section { 
    float: none; 
    height: auto; 
    font-size: 20px; 
    } 

HTML

<header> 
    <div id="logo"> <img src="images/havoc_logo.png"> </div> 
    <nav> 
    <a href="#logo">Home</a> 
    <a href="#whatwedo">What we do</a> 
    <a href="#whoweare">Who we are</a> 
    <a href="#partners">Who we work with</a> 
    <a href="#contact">Say hello</a> 
    <a href="Blog">Blog</a> 
    </nav> 

</header> 




    <section id="whatwedo"> 
      <div class="container-fluid"> 
      <h1><span style="color: rgb(133,52,146);">&#43;</span>What we do</h1> 
       <div class="cols"> 
         <div class="row no-gutters"> 
          <div class="col-md-3"> 
           <h2>ADVERTISING</h2> 
           <img src="images/advertising.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div>  
          <div class="col-md-3"> 
           <h2>GRAPHIC DESIGN</h2> 
           <img src="images/graphic_design.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div> 
          <div class="col-md-3"> 
           <h2>BRAND IDENTITY</h2> 
           <img src="images/brand_identity.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div> 
          <div class="col-md-3">  
           <h2>BRAND GUIDELINES</h2> 
           <img src="images/beard.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div>  

         </div> 
         <div class="row no-gutters"> 
          <div class="col-md-3"> 
           <h2>PRINT MANAGEMENT</h2> 
           <img src="images/print.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div>  
          <div class="col-md-3"> 
           <h2>CREATIVE DIRECTION</h2> 
           <img src="images/creative_direction.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div> 
          <div class="col-md-3"> 
           <h2>EDITORIAL DESIGN</h2> 
           <img src="images/ed_design.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div>  
          <div class="col-md-3"> 
           <h2>AND LOTS OF OTHER STUFF</h2> 
           <img src="images/other_stuff.jpg" class="image" style="width: 100%; height: 300px;"> 
           <div class="overlay"> 
            <div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div> 
           </div> 
          </div>  

         </div> 
       </div> 
     </div>   

    </section> 

Toute aide appréciée.

Answer 1

Je pense que votre problème est la hauteur! Essayez avec min-height.

Answer 2

Il est vraiment difficile de trouver des erreurs dans votre code lorsque cette quantité est fournie. Vous devriez publier le code html approprié, utiliser la grille css-flexbox ou bootstrap (ou tout autre système de grille). Vous pouvez trouver la grille Bootrstrap v.4 seulement (sans autre style) here. J'espère que cela aide!