How can I make width flexible with CSS when using bootstrap's responsive design?

Question

First of all, I'm using bootstrap's responsive design.
I want this bubble to fit in fluid. But it sticks out when if it's narrow width.
How can I fix this?
It also has to be fitting in any width.
Is it possible?

When shrinking down, bubble is sticking out!

Demo http://jsfiddle.net/SAKWb/

HTML

<div class="chat">

<table>
  <tbody>
     <tr>
               <th>Body</th>
     </tr>



    <tr id="comment_617">
            <td><div class="bubble me"><span class="text-error">01-10 03:29</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div></td>
    </tr>




    <tr id="comment_615">
            <td><div class="bubble me"><span class="text-error">01-10 03:25</span>：Person A<br>
            bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
            <form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"><div><input name="_method" value="delete" type="hidden"><input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"><input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"></div></form>
            </div></td>
    </tr>
</tbody>

 <div>

CSS

.chat {
    width: 100%;
    min-width: 300px;
}

.bubble{
    background-color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    word-break: break-all;
}

.bubble::before {
    background-color: #FFFFFF;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.me {
    float: left;   
    margin: 5px 45px 5px 5px;
    min-width: 250px; 
    width: 100%;      
}

.me::before {
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px;           
}

.you {
    float: left;    
    margin: 5px 10px 5px 5px;
    min-width: 250px;
    width: 100%;          
}

.you::before {
    box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
    right: -9px;    
}

possible duplicate of [How can I make width 100% max ? when I'm looking with both PC and iPhone?](http://stackoverflow.com/questions/14265666/how-can-i-make-width-100-max-when-im-looking-with-both-pc-and-iphone) — cimmanon, Jan 10 '13 at 20:44

Scott Selby · Accepted Answer · 2013-01-10T20:46:48.607

the gray background of the bubbles has a class of .hero-unit - the padding is pushing the bubble out of the gray background

.hero-unit {
padding: 15px;  /*This was 60px*/
...
}

then then width of the bubble needs to be decreased from 100% since there is 15px padding , so change this

.me {
float: left;
margin: 5px 45px 5px 5px;
min-width: 250px;
width: 85%;  /*this line was 100%*/
}

if you want to keep the 60px padding , that is ok, but the width of .me must be even smaller , adjust accordingly

score 1 · Answer 2 · answered Jan 10 '13 at 20:49

Assuming you don't want to get rid of the padding that's pushing the bubbles over to the right, making the .bubble and .chat elements a smaller percentage width keeps them from sticking out.

However, I'm assuming you don't want the .chat area to be at 30% the whole time, so why not use media queries?

Example:

@media (min-width: 500px) {.chat{width:50%} .bubble{width:40%}
@media (min-width: 300px) {.chat{width:30%} .bubble{width:30%}

Obviously these are not the actual numbers you should be using, but if you play around with these you should be able to make it look good in any window size without losing the structure you already had.

How can I make width flexible with CSS when using bootstrap's responsive design?

2 Answers2