My Chart wont show on mobile devices

Using Django Templates & Frontend
1

So i have a button that toggles the chart and hides the chart

**it works well in windows or desktops,**but as soon as i load my page on mobile and when i click the button nothing shows)

now all my content is under the main div called #main-base-content

and in that Div is another div class called flexbox-buttons and finally the Chart is displayed inside the flexbox-buttons div

but here you can checkout my github link, (i have only included the CSS and js and html files only)

My CSS file

.spinner {
  border: 8px solid rgba(0, 0, 0, 0.1);
  border-top-color: #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s ease-in-out infinite;
  margin: 0 auto;
  display: none;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}



#main-base-content{
display: flex;
flex-wrap: wrap;
background-color: white;
justify-content: center;
gap: 20px;
}


.flexbox-Buttons{
display: flex;
flex-wrap: wrap;
background-color: white;
justify-content: center;
gap: 20px;
margin: 45px;
width: 100%;
}



#chart-wrapper { 
  display: none;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50vh;
  /* gap: 20px;
  margin: 45px;  */
  width: 100%; 
} 



.flexbox-item{
width: 250px;
height: 250px;
margin: 45px;
}

img{
height: 250px;
width: 250px;
object-fit: contain;
}

.Main-Info{
text-align: center;
}

.small-heart {
font-size: 0.8em;
color: #ff0000;
}



@media (max-width: 767px) {
  #chart-wrapper {
    height: 300px; /* or any other height that works for your chart */
  }
}
2

OMGG I found why it was not loading .

I am running python django on asgi server from desktop… So for some reason it does not load the Websicket channels in mobile… and the chart was getting the data from the Websocket channels.

So i switched to regular ajax views and it works.

so now another problem is why websockets wont work on mobile