How to fix responsive error - html

Question

The problem is that when I resize the window to small size (mobile) it looks fine, but when i revert it to large the canvas extends outside its parent column.
Fiddle
I am using bootstrap 3.3.
But i have to tell that,no problem with other boxes, it doesn't go out of boxes expect this graph
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 4px 0px 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
height: 48px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
canvas {
background: pink;
}
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-content" style="border-radius: 10px;">
<div>
<h3 class="font-bold no-margins">
Statistics Graph
</h3>
</div>
<div class="m-t-sm">
<div class="row">
<div class="col-md-12">
<div>
<canvas id="lineChart" height="114"></canvas>
</div>
</div>
</div>
</div>
<div class="m-t-md">
<small class="pull-right">
<i class="fa fa-clock-o"> </i>
Update on 16.07.2015
</small>
<small>
<strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
</small>
</div>
</div>
</div>
</div>

Answer 1

You probably have set only #media for mobile, so when u resize back to "normal" view it doesn't find a #media for normal view and no rules is overriden.
You should do something like this:
div.try {width:400px;border:1px solid #000;height:300px;}
#media (max-width:400px) {
div.try {width:150px;}
}
#media (min-width:401px) {
div.try {width:400px;}
}
<div class="try"></div>

Answer 2

Canvas is not being resized dinamically so you can try with:
canvas {
width: 100%;
height: auto;
}
canvas {
width: 100%;
height: auto;
}
.ibox-title {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-color: #ffffff;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 4px 0px 0;
color: inherit;
margin-bottom: 0;
padding: 14px 15px 7px;
height: 48px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-content" style="border-radius: 10px;">
<div>
<h3 class="font-bold no-margins">
Statistics Graph
</h3>
</div>
<div class="m-t-sm">
<div class="row">
<div class="col-md-12">
<div>
<canvas class="img-responsive" id="lineChart" height="114"></canvas>
</div>
</div>
</div>
</div>
<div class="m-t-md"> <small class="pull-right">
<i class="fa fa-clock-o"> </i>
Update on 16.07.2015
</small>
<small>
<strong>Analysis of sales:</strong> The value has been changed over time,sdasdas as been changed over time,sdasdas
</small>
</div>
</div>
</div>
</div>

Answer 3

Actually, issue is this when the page is loaded the graph is being created with particular height and width but there is no such option when you resize the window. SO, we have to call redraw() or draw() on $(window).resize() function.
Note: Draw() and redraw() function depends on chart library you are using. First, check which function is to recreate the chart then call it.
But, most of the chart library have redraw function.
I can tell you more if mention the jquery plugin name for the charts.