div Breite bei 80%, überläuft Eltern div auf kleinen Bildschirmen

Question

Ich fange gerade mit html/css/javascript. Ich versuche eine Angebotsblase zu erstellen, die 80% der Breite des übergeordneten Containers hat. Sie können es hier sehen: http://seiu775bg.bitballoon.com/sample.

Es sieht auf einem Laptop-Bildschirm gut aus, aber wenn ich den Bildschirm schmaler mache, bleibt es nicht bei 80% Breite. Hier

ist der Code für die Sprechblase:

p.speech { 
    position: relative; 
    width: 80%; 
    height: auto; 
    text-align: left; 
    font-style:italic; 
    line-height: auto; 
    padding: 10px 20px; 
    background-color: #fff; 
    border: 8px solid #666; 
    -webkit-border-radius: 30px; 
    -moz-border-radius: 30px; 
    border-radius: 30px; 
    -webkit-box-shadow: 2px 2px 4px #888; 
    -moz-box-shadow: 2px 2px 4px #888; 
    box-shadow: 2px 2px 4px #888; 
    display:block; 
    margin: 8px 8px 35px 8px; 
} 

Was mir fehlt? Danke im Voraus!

Answer 1

Läßt die Eltern überprüfen, werfen Sie einen Blick auf die Eltern „Breite“

#container { 
    /* border: 1px solid black; */ 
    width: 500px; <--- change it. 
} 

@media screen and (max-width: 500px) 
#container { 
    width: auto; <--- see? 
} 

ich nur „max-width: 500px“ sehen, in der Regel, wenn wir machen es reagiert, wir verwenden einige weitere mediaqueries.

machen Sie die Änderungen dort, versuchen Sie auch, mehr Auflösungen auf Ihrem CSS hinzuzufügen.

Answer 2

Ich sah Ihr Problem. und es ist auf #container. Sie haben festgelegt es width:500px; es ändern zu max-width: 500px; oder width:auto;