How To Style Elements For Responsive Web Design?

I have created pie chart using chartist.js I am not able to create responsive web design. When I reduce window size i.e for small window the legend should go above pie chart and fo

Solution 1:

I have modified CSS file as follows:

.ct-pie-chart .ct-legend li.inactive:before {
  background: transparent;
}

.piechart-title {
  text-align: center;
}

.ct-pie-chart .ct-legend.ct-legend-inside li{
  display: inline-block;
}

.ct-pie-chart .ct-legend li {
  margin: 2%;
}

.mychart {
  display: flex;
  align-items: flex-start;
  margin-left: 40%;
}

.ct-pie-chart .ct-legend {
  float: right;
}

In my react component:

Parent component:

<div className="mychart">
     <Pie/>
</div>

Pie component:

render(){
    return(
         <div className="ct-pie-chart">
             {this.piechart}
         </div>
    )
}

Making above changes works fine and now the pie chart and legends do not overlap on each other.