Handle vertically centering the circle better and use a media query to hide text in circle when screen is too small.
.chart {
flex-grow: 1;
- margin-bottom: -5em;
+ //margin-bottom: -5em;
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
canvas {
width: 100% !important;
}
.total-count {
- position: relative;
- top: -50%;
+ position: absolute;
width: 100%;
text-align: center;
font-size: 22px;
}
- .text {}
+ @media (max-width: 1020px) {
+ .text { display: none }
+ }
+
}
}
