Reorder website for Mobile View

Dash Python
4

Hi @tcbegley, thanks for the tips!

Could you please elaborate a little about the exact effect of

app = dash.Dash(
    external_stylesheets=[dbc.themes.BOOTSTRAP],
    meta_tags=[
        {"name": "viewport", "content": "width=device-width, initial-scale=1"}
    ],
)

?

I successfully use

dbc.Col([
    # column content
    ...
], lg=2, width=12)

to define responsive design with 2 variants in mind - lg for large screen (desktop, laptops, some tablets), and width for anything else (phones).

I don’t see any effect of the meta_tags that you mentioned. What should I see happening when using them?

Also, could you advise me on how to adjust size of all fonts for the case of small screens? I currently use this custom css and it works but I know it’s far from ideal.

@media (max-width:991px) {
  body {
    zoom: 200%;
  }
}

Thanks for any advice :slight_smile: