Reorder website for Mobile View

Dash Python
1

Hi,

Has anyone have any success with using dash_bootstrap_components for changing layout to mobile view?

I’ve seen some dash examples that will have two figures side by side in desktop mode and then one above each other in mobile view. However this doesn’t seem to be working for me.

image

Ideally I would like to be able to specify the order of dbc.cols to appear as rows when in mobile mode.

Any suggestions with this is creatly appreciated!

2

This is definitely possible. You typically want to use the width or xs property of dbc.Col to set the width of the columns on a mobile screen, and md or lg to set the width of columns on a large screen. What are you trying at the moment?

There’s a bunch of examples in the layout docs for dash-bootstrap-components.

One other thing is that to ensure proper scaling of content on mobile devices you might want to instantiate your app like this

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

tcbegley second time you have to rescue for me! absolute hero!

This solved my issue quickly once again. thank you

1 Like
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:

5

There’s a really nice explanation of the meta tags on the MDN website. In brief though, many mobile devices render content according to a larger, virtual viewport then shrink content down, essentially to make sure that websites that haven’t been optimised for viewing on mobile devices don’t look too awful. Adding the meta tags basically tells the device that you’ve designed the site to be viewed on mobile and it should display content according to the actual viewport size rather than the scaled one.

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

You won’t see any difference just by resizing the browser window, but you will notice a difference if you either visit your app on a mobile device, or use the device toolbar in your browser’s developers tools to view the app as though it were on a mobile device.

Also, could you advise me on how to adjust size of all fonts for the case of small screens?

You’re going to have to do something with media queries, so I don’t think your solution is all that bad, though I would probably recommend setting font-size directly on different types of content rather than setting a global zoom property.

Bootstrap does actually have responsive font size support, but it’s turned off by default so it requires you manually compile the CSS which might be more hassle than it’s worth. If you’re not comfortable running the sass compiler yourself, you could try this website. Just search for the $enable-responsive-font-sizes toggle and make sure it is enabled.

4 Likes
6

Thank you for the explanation @tcbegley.

You won’t see any difference just by resizing the browser window, but you will notice a difference if you either visit your app on a mobile device, or use the device toolbar in your browser’s developers tools to view the app as though it were on a mobile device.

I actually didn’t see any difference even when using device toolbar in chrome’s dev tools.

I would probably recommend setting font-size directly on different types of content rather than setting a global zoom property.

I tried

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

but that did not enlarge fonts inside of dcc.Graph so eventually I stuck to zoom: 200%.