How do I make my bubble chart responsive? I want to display only 10 bubbles for large screens and have the number of bubbles per row decrease as the screen size gets smaller. I initially tried setting the width of each bubble to 10%, but it didn't work well for responsiveness.
.chart-padding{
padding: 20px;
}
.ten-bubbles{
width: 10%;
}
.qs {
top: 25px;
position: absolute;
display: inline-block;
/* display: flex; */
left: 50%;
margin-left: -9px;
z-index: 2;
}<div class="container-fluid border" style="background-color: white;width:90%;">
<ng-container *ngIf="analytics.length > 0">
<div class="row chart-padding">
<div class="ten-bubbles col-sm-3 col-xs-6" style="cursor: pointer; height: 70px;" *ngFor="let prof of analytics;let i=index"
(click)="selectedQstn = i">
<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span>
</div>
</div>
</ng-container>
</div>