Responsive problem

Hi Guys, Im back

I’m having a problem with responsiveness in my app when I modify the screen dimension for mobile display, I thought my code was right, but it’s not what it looks like… Can anyone help me?

My code for review:

opcoes = df[['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','CL','KMax','K','D','A','FK','FD']].columns.values
col_table = df[['Player', 'ACS','K:D','KAST','ADR']]

fig_pick = px.pie(map_pick, values='Total', names='Map', title='Pick Maps', height=310)
fig_pick.update_layout(margin=dict(l=40, r=55, t=45, b=20) ,autosize=True , template='slate')
#fig_pick.update_layout(margin=go.layout.Margin(l=15, r=15, t=40, b=15) ,autosize=True , template='lux')

fig_ban = px.pie(map_ban, values='Total', names='Map', title='Ban Maps', height=310)
fig_ban.update_layout(margin=dict(l=40, r=55, t=45, b=20) ,autosize=True , template='slate')

fig_atk =, x='Map', y='Atk Wins', color='Map', title='Taxa de Vitórias nos mapas no lado de ataque pelo Valorant Champions em %:', 
    'Atk Wins': 'Vitórias no lado de Ataque em %',
    'Map': 'Mapa'        }, text='Atk Wins', height=310)

fig_atk.update_traces(textposition='inside',texttemplate='%{text:.3s}' )
fig_atk.update_layout(margin=dict(l=40, r=55, t=45, b=20),autosize=True, template='slate')

fig_def =, x='Map', y='Def Wins', color='Map', title='Taxa de Vitórias nos mapas no lado de defesa pelo Valorant Champions em %:', 
    'Def Wins': 'Vitórias no lado de Defesa em %',
    'Map': 'Mapa'        }, text='Def Wins', height=310)

fig_def.update_layout(margin=dict(l=40, r=55, t=45, b=20),autosize=True, template='slate')

image_path = 'assets/5.png'

app.layout = dbc.Container(children=[



                                        html.Img(src=image_path, style={'padding': '2px'}),
                                        html.H2('Dashboard Valorant Stats'),
                                        dcc.Dropdown(opcoes, value = 'ACS' , id='check_opcao', maxHeight=300, style={'color': 'MediumTurqoise', 'font-size': 20}),
                                ],style={'height': '94vh', 'margin': '17px', 'padding': '17px'})

                        ], width=2, sm=2, md=2),



                                html.H1('Player Stats', style={'margin-top': '30px'}),
                                dbc.Col([dbc.Card(dcc.Graph( id='grafico_gc_players'))] , width={"size": 8}, sm=8, md=8),
                                        dbc.Label('Click a cell in the table:'),
                                        dash_table.DataTable(df.to_dict('records'),[{"name": i, "id": i} for i in col_table.columns], page_size=10 , id='tbl',
                                                        {'if': {'column_id': 'Player'},
                                                        'width': '10%'}
                                        ],style={'padding': '30px'}, width={"size": 4}, sm=4, md=4)
                                html.H1('Maps Stats', style={'margin-top': '10px'}),
                                dbc.Col([dbc.Card(dcc.Graph(id='map_pick', figure=fig_pick))], width=3, sm=3, md=3),
                                dbc.Col([dbc.Card(dcc.Graph(id='map_side_atk', figure=fig_atk ))], width=7, sm=7, md=7),

                                dbc.Col([dbc.Card(dcc.Graph(id='map_ban', figure=fig_ban))], width=3, sm=3, md=3),
                                dbc.Col([dbc.Card(dcc.Graph(id='map_side_def', figure=fig_def ))], width=7, sm=7, md=7)
                        ], style={'margin-top': '16px'})

                ],width=10, sm=10, md=10)
        ], fluid=True, className="dbc")

        Output('grafico_gc_players', 'figure'),
                Input('check_opcao', 'value'),

def renderizar_graficos(check_opcao):

    if check_opcao == 'ACS':
                fig =, 'ACS'), x= 'Player', y= 'ACS',  title='Top 10 jogadores em: ' + check_opcao, color='Player', barmode = 'stack', 
                                'Player': 'Nome e Time',
                                'ACS': 'ACS'}, text='ACS')

    elif check_opcao == 'HS%':
                 fig = px.scatter(df.nlargest(10, 'HS%'), x="Player", y= check_opcao, title='Os 10 Jogadores com a maior taxa de HS e seu KD no Valorant Champions:',
                                'Player': 'Jogador',
                                'HS%': 'HS%'}, size='ACS',  
                        hover_data=['Player'] , text='HS%')
    else :
        fig =, check_opcao), x='Player', y= check_opcao, color= check_opcao, title='Top 10 jogadores em: ' + check_opcao, barmode = 'stack', 
                    'Player': 'Nome e Time'}, text= check_opcao)

    fig.update_layout( template='slate')

    return fig

Hello @Luisanches!

Normally, I actually prefer stacking elements instead of trying to fit them side by side.

However, in order to do this, it means that you need to take all your styling and put it into a stylesheet. Using a media query you can designate at what size your display does what.

You can also use this for designing how the page will look when you print it as well. (This is a nifty trick for adding custom headers to the page that you dont need for displaying on the web) :slight_smile:

Cool, Thank you for showing this tool, But then analyzing my code the problem is not in the DBC components? (sm,md)

Yes, you can use that, but it still only adjusts the width, as I understand it.

The way to customize a design for a smaller screen with stacking requires quite a bit of thought. But I think, especially for charts, is necessary.

1 Like

Although, you might be able to try setting s=12 and see what that does.

It might overflow the row and force the next item to drop. :slight_smile:

1 Like