# How to fit a dcc graph into a tab **URL:** \ **Category:** Dash Python\ **Tags:** question\ **Created:** [June 23, 2022, 5:26pm UTC](https://community.plotly.com/t/how-to-fit-a-dcc-graph-into-a-tab/65408 "2022-06-23T17:26:05Z")\ **Posts on this page:** 3\ **Page:** 1
**Author:** ![lotso](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@lotso](https://community.plotly.com/u/lotso)\ **Post date:** [June 23, 2022, 5:26pm UTC](https://community.plotly.com/t/how-to-fit-a-dcc-graph-into-a-tab/65408/1 "2022-06-23T17:26:05Z")
Hi, I´m having problems to fit an dcc graph into a tab. I see the dash documentation and put the responsive mode and I get this ![imagen_2022-06-23_122427028](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/c/c/cce7ee282d82dffd826745afc1d979b4913b9800.png) when I try to do that into my own tab I get this ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/4/44a72c9d98896eb32513e66f740a8dbfc8158395.png) How to fit this graph as the documentation? I alredy use responsive= True Thanks for your help. ---
**Author:** ![adamschroeder](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/adamschroeder/32/17280_2.png) [@adamschroeder](https://community.plotly.com/u/adamschroeder)\ **Post date:** [June 24, 2022, 6:12pm UTC](https://community.plotly.com/t/how-to-fit-a-dcc-graph-into-a-tab/65408/2 "2022-06-24T18:12:49Z")
hi @lotso 👋 Welcome to the Dash community. Can you please share more about your problem and an example code that you use. It would be great if we could run your code directly on our computer and see the same problem you’re seeing. Thank you, ---
**Author:** ![lotso](https://avatars.discourse-cdn.com/v4/letter/l/94ad74/32.png) [@lotso](https://community.plotly.com/u/lotso)\ **Post date:** [June 25, 2022, 8:02pm UTC](https://community.plotly.com/t/how-to-fit-a-dcc-graph-into-a-tab/65408/3 "2022-06-25T20:02:04Z")
Hi @adamschroeder I´m using dash core component into a html div, I do a css grid in this div and the graph doesn´t fit well when I put the responsive mode. This is my dash component ```auto html.Main(className='content',children=[ html.H1('Welcome, Human'), html.P('Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia, explicabo!'), html.Div(className='contenedor',children=[ dcc.Tabs([ dcc.Tab(label='Dashboard', children=[ html.Br(), html.Div(className='contenedor_pestaña_1',children=[ html.Div(className='mini_container',children=[ html.H3('Obligaciones'), html.H1('1234'), ]), html.Div(className='mini_container',children=[ html.H3('Obligaciones'), html.H1('1234'), ]), html.Div(className='mini_container',children=[ html.H3('Nuevos'), html.H1('1234'), html.H4(''), ]), html.Div(className='mini_container',children=[ html.H3('ICV'), html.H1('1234'), html.H4(''), ]), html.Div(className='gaficas_1',children=[ dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [1, 4, 1], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': u'Montréal'}, ] },responsive=True ), ]), html.Div(className='gaficas_1',children=[ dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [1, 4, 1], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': u'Montréal'}, ] },responsive=True ), ]), html.Div(className='gaficas_1',children=[ dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [1, 4, 1], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': u'Montréal'}, ] },responsive=True ), ]), html.Div(className='gaficas_1',children=[ dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [1, 4, 1], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': u'Montréal'}, ] },responsive=True ), ]), ]), ]), dcc.Tab(label='Tab two', children=[ dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [1, 4, 1], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': u'Montréal'}, ] },responsive=True ), dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [1, 4, 1], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [1, 2, 3], 'type': 'bar', 'name': u'Montréal'}, ] } ) ]), dcc.Tab(label='Tab three', children=[ dcc.Graph( figure={ 'data': [ {'x': [1, 2, 3], 'y': [2, 4, 3], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [5, 4, 3], 'type': 'bar', 'name': u'Montréal'}, ] } ) ]), ]), ]) ]) and this is the css code .contenedor_pestaña_1 { width: 100%; /*max-width: 1000px; margin: 0 auto;*/ display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 20px; } .mini_container { margin: 10px; padding: 15px; position: relative; box-shadow: none; border-radius: 5px; border: 1px solid; text-align: center; } .gaficas_1 { grid-column: span 1; border: 1px solid; border-radius: 15px; padding: 1rem; } @media only screen and (min-width: 500px) { .contenedor_pestaña_1 { grid-template-columns: 1fr 1fr; } .gaficas_1 { grid-column: span 2; border: 1px solid; border-radius: 15px; padding: 1rem; } } @media only screen and (min-width: 850px) { .contenedor_pestaña_1 { grid-template-columns: 1fr 1fr 1fr 1fr; } } ``` The full size view is OK, but the responsive mode view is ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/6/0/60f8a1c2be5bd9278d7604ba3c54740680a8716c.png) thanks for your help