I have been working on this simple dashboard which can be viewed using this link. The source code is here and the CSS file which is where the problem lies is here. I used grid layout, not sure if it's appropriate for this project, but I chose it becuase I wanted to get some experience with it. My current goal is to make it mobile friendly. I used @media only screen and (max-width: 800px) to transform the layout for mobile view. It works when I shrink the page on my pc but when I test it on mobile view it doesn't work (I tried using different max-width values such as 400px or 600x and it didn't work. How do I Fix that?
I solved it by adding meta tag to app = dash.Dash(__name__), looks like this:
app = dash.Dash(__name__,
meta_tags=[{'name': 'viewport',
'content': 'width=device-width, initial-scale=1.0, maximum-scale=1.2, minimum-scale=0.5,'}]
)