Jquery Animation und Handy

Question

Ich habe eine Animation mit jQuery von 3 divs gemacht, die einblendet und einige h3, die von links kommen und in der Mitte des Bildschirms bleiben, aber wenn ich das Fenster verkleinere, sagen wir zu Handy-Dimensionen Briefe hören nicht in der Mitte auf, sondern gehen weiter und ich sehe ziemlich schlecht aus.

Auch da benutze ich Bootstrap meine Nav-Leiste wird klein und macht Sie auf eine Schaltfläche klicken, die ein Dropdown hat jetzt, wenn ich dort den Absatz h3 nicht an dem Ort der es auf dem div es bleibt (es folgt nicht dem div, aber es bleibt an einem bestimmten Teil des Bildschirms).

Dies ist, was ich derzeit haben:

$(document).ready(function() { 
 
    $("#div1").fadeIn(5000, function() { 
 
    $(".what").animate({ 
 
     "left": "45%" 
 
    }, 1300); 
 
    }); 
 
    $("#div2").fadeIn(3000); 
 
    $("#div3").fadeIn(1500); 
 
});

#what { 
 
    position: absolute; 
 
    left: -40%; 
 
    top: 130px; 
 
} 
 

 
#div1 { 
 
    display: none; 
 
} 
 

 
#div2 { 
 
    display: none; 
 
} 
 

 
#div3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 

 
<div id="div1" class="container-fluid bg-1 text-center"> 
 
    <h3><a id="what" class="margin what">What Am I?</h3></a> 
 
    <img src="https://thumb.ibb.co/fEchLa/e.jpg" class="img-responsive img- 
 
    circle margin kuklos" style="display:inline" alt="Me" width="350" height="650"> 
 
    <h3>I'm A Young Freelancer.</h3> 
 
</div>

Answer 1

Versuchen # div1 {position geben: relative; Breite: 100%}