Hey Everyone, I spent a good amount of time building a Dash app and am to the point that I am comfortable with how it looks on a web browser. However, I came to the realization that after deployment that most users will use the app on their mobile phones. I’ve added meta tags and have set sizes usi…

Hello @clevercolt , Welcome to the community! Mobile friendliness is something that definitely needs focus more and more. What I do is use css along with media queries with screen size and pointer types to determine how I want things to display. @media only screen and max-width (920px) { .da…

Thanks so much for the reply! I’ll look into this and report back once I have time to test it out.

@clevercolt In the screenshot on the bottom, it appears that the content only takes up half the screen. Is that the case? If so, the layout may not be set up correctly. If you can make a minimal example, I might be able to help.

@AnnMarieW Thanks for the reply! And sorry for the slow response on my part, haven’t had much free time the last couple of days. It’s possible that you are correct. I attached a skeleton script (Github gist) of how I have the layout of my app setup. I’d love any feedback to see if I have actually se…

I am not sure who to credit for originally posting this on these forums but I found it here. My graphs looked terrible on a phone like yours until I added a css stylesheet to the assets folder. Inside of this css sheet I added the following code. .dash-graph { zoom: 0.45; } @media (min-w…

Well, sure you could add some CSS for the figures that will override what you specified in the layout. This was suggested earlier too. But that won’t fix all the other elements that only take up half the screen. Lets’ look at the layout for this heading. h3_ = html.H3("Select Artist(s)", styl…

Dash bootstrap and Dash mantine both have the ability to feed these settings when everything is set in a grid layout. This works well in a lot of cases. But sometimes the effort of trying to have things in a grid layout is too difficult to implement (custom dashboard layout where the users can drag…

@AnnMarieW @jinnyzor @ lykolate Thanks a bunch to the 3 of you for your detailed replies! I haven’t had a ton of free time to work on the app lately… but I have implemented some of what y’all have shared and these changes have already made a big difference! Two things I need to sort out: The DBC …

For you tables, you could consider using AG grid instead. It is responsive in nature and has a slew of cool things that are innately available.

How to optimize Dash App for mobile phone view

Dash Python

clevercolt March 1, 2023, 12:31am 2

Wanted to bump this post on account of my stuckness

Topic		Replies	Views
Reorder website for Mobile View Dash Python	5	8046	May 26, 2020
Mobile content/responsiveness in Dash app Dash Python community-components , question	8	182	June 23, 2025
Layout changes with screen size and resolution Dash Python	5	15511	June 8, 2020
How to get a responsive layout Dash Python	8	20023	March 24, 2022
Django_plotly_dash responsive Dash Python	7	2879	April 12, 2024

How to optimize Dash App for mobile phone view

Related topics