Adaptive layout on mobile devices for Superset Dashboard

[memes-forever]

Screenshot

Description

Let us continue our discussion on this issue, as it is required by many users.

Past Topics

• Does superset support mobile device? #13725
• Does superset support mobile device? #13816
• Make Superset Dashboard adapts layout on mobile devices #6472

Design

I suggest stretching the blocks to the width of the screen, placing the blocks in a column.

Style example:

@media only screen and (max-width: 790px) {
  .grid-row.background--transparent {
    flex-wrap: wrap;
  }
  .dragdroppable-column{
    min-width: 95%;
    max-width: 95%;
    margin-bottom: 16px;
  }
  .resizable-container{
    width: 100%;
    max-width: 100%;
  }
}

[srinify]

Nice! Moving to Discussion as this isn't a bug or "issue" :)

[BoogalooLi]

thanks for your example. But in the table Top 10 Games, the data cannot be shown properly on mobile device. Do you have some better attempts?

[coderyeasin]

I also try it out but not working in mobile device or tab or laptop size. this media query its not applied properly in dashboard. how can i resolve it anyone have idea? please share it with us!

[lelelethu]

Is there anyone have solution for that?