div width at 80%, overflows parent div on small screens

Question

I'm just beginning with html/css/javascript. I'm trying to make a quote bubble that is 80% the width of its parent container. You can see it here: http://seiu775bg.bitballoon.com/sample .

It looks fine on a laptop screen, but when I make the screen narrower, it doesn't remain at 80% width.

Here is the code for the speech bubble:

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;
}

What am I missing? Thanks in advance!

Answer 1

I saw your problem. and it is on #container . You have set it width:500px; change it to max-width: 500px; or width:auto;

Answer 2

Lets check the parent, take a look on parent "width"

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

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

I only see "max-width: 500px", usually when we make it responsive, we use some more mediaqueries.

make the changes there, also try to add more resolutions on your css.