My Chart wont show on mobile devices

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 */
  }
}

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