Блог

Я хочу увеличить круговую диаграмму или уменьшить пробелы внизу this is mobile view after inspecting from chrome dev tools

                     <div class="page-content page-container" id="page-content">
                        <div class="padding">
                            <div class="row">
                                
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-header">Pie chart</div>
                                            <div class="card-body" style="height: 400px">
                                                <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
                                                    <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                                                        <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
                                                    </div>
                                                    <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                                                        <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
                                                    </div>
                                                </div> 
                                                
                                                <canvas id="chart-line" width="399" height="400" class="chartjs-render-monitor" style="display: block; width: 400px; height: 500px;"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                
 

Я добавил медиа-запросы и получил то, что искал, но как только я вручную меняю размер chrome, круговая диаграмма становится неуместной и выглядит очень плохо.это то, чего я пытаюсь добиться код для CSS `

 @media (max-width:991.98px) {
    .padding {
        padding: 1.5rem;
    }
}

@media (max-width:767px) {
    .padding {
          padding: 1rem ;  
    }
    .card{  
        height: 20rem;  /* this code makes it possible */  
    }
}
 

`

 @media (max-width:400px) {
  .padding {
      padding: 1rem ;  
  }
  .card {  
    height: 19rem;  /* this code makes it possible */  
    top: -50px;
  }
}
 

Добавление высоты помогло, потому что после проверки элементов отображался CSS, влияющий на карточку, а затем методом проб и ошибок была успешно реализована желаемая высота.