Adapt Dash Web App to Mobile Devices

Make your Dash web app layout responsive to mobile devices. We will use meta tags and Dash Bootstrap as well as Chrome DevTools to manipulate the layout of our app on various devices and screen sizes. Download the code below.

Code: https://github.com/Coding-with-Adam/Dash-by-Plotly/tree/master/Dash_More_Advanced_Shit/Dash_Mobile

Data: https://drive.google.com/file/d/1B3tVfVcVyUnX2FHG1h8ma48Y__vqAWPw/view?usp=sharing

Information on meta-tags: https://stackoverflow.com/questions/22777734/what-is-initial-scale-user-scalable-minimum-scale-maximum-scale-attribute-in

Video layout: 00:00 - App demo and what you will learn 03:05 - Two methods to create responsive mobile layout 04:00 - Choose your mobile device 07:24 - Method 1: Meta Tags 14:40 - Limitations of Meta Tags 16:22 - Method 2: Dash Bootstrap 25:30 - Aligning layout with className (CSS)

👉 If you appreciate these tutorials and would like to support their existence, while enjoying additional Dash Plotly tips: https://www.patreon.com/charmingdata ... https://www.youtube.com/watch?v=4nEYCGsyz20