Responsive Design in meiner Seite

Question

Ich habe eine zufällige Quote Seite mit Bootstrap erstellt, aber der Inhalt meiner Seite geht aus dem Container-Fluid, wenn ich die Fenstergröße reduzieren. Wie kann ich das ändern?

Dies ist meine Seite: http://codepen.io/Juan1417/pen/wowevJ

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link href="https://fonts.googleapis.com/css?family=Anton|Dancing+Script" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> 

<div class="container-fluid text-center"> 

    <div class="row"> 
     <div class="col-md-8">  
     <h1 id="title1">Random quote generator.</h1> 
    </div> 

    </div>  
    <div class="row"> 
     <div class="col-md-8"> 
    <blockquote> 
     <p id="quote">"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."</p> 
     <footer id="author">Author</footer> 
     </blockquote>  
      </div> 
     <div class="col-md-8"> 
     <i class="fa fa-quote-right fa-3x" aria-hidden="true"></i> 
     </div> 

    <div class="row"> 
     <button id="button1"class="btn btn-default" type="submit">New Quote</button> 
     <button id="tweetButton"class="btn btn-default" type="submit">Tweet Quote</button> 

    </div> 


    </div> 

Answer 1

in Ihrem CSS, versuchen Sie Medienanfragen (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries), um festzustellen, ob Sie kleinere Schriften umschalten müssen, Knopfgrößen, Bild Waage, Überlauf Menüs oder sogar Elemente für winzige Formfaktoren ganz eliminieren.