I have a page that looks good when the scale is 90%:

But if I change it to 100% scale it starts to look like this:

I tried to add some col-lg-* and col-12 to my Cols classnames attributes, but that just causes them to overlap. What I need is equally scaling of each element, without any of them causing another to change “row”.

Here’s the app.py script:

import dash
import dash_bootstrap_components as dbc
from dash import html, dcc

dash_bootstrap_components
app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])
app.config.suppress_callback_exceptions = True              
app.layout = html.Div([
    dcc.Store(id='csv-store'),                        
    dcc.Store(id='json-store'),                         
    html.Div(error_message, className='error-message'),  

    dbc.Row([
        dbc.Col([
            dbc.Row([
                dbc.Col([button_download], width=6, className='text-start'),    
                dbc.Col([pdf_button], width=6, className='text-start')          
            ], className='align-center mb-3 g-0')
        ], width=3),

        dbc.Col([dbc.Row([
            html.H1('Patient data', className='fs-4 text-center'),              
            survey_table],                                                      
            style={'backgroundColor': '#201F21'}, className='pb-5')],
            width=9, className='mt-3 pe-4 ps-4')
    ]),

    html.Div(style={'height': '30px'}),                                         

    dbc.Row([
        dbc.Col([

            dbc.Row([

                dbc.Col([
                    dbc.Row([dbc.CardBody([html.H2('Table Data', className='fs-2 text-center')],
                                          style={'backgroundColor': '#201F21'}, className='pe-2 mb-3')]),  
                    dbc.Row([dbc.CardBody(
                        [
                            biomarkers_table                                                               
                        ], style={'backgroundColor': '#201F21'},
                        className='col-4 col-md-4, col-lg-2 col-xl-2 col-xxl-2 p-2 mt-3'
                    )]),
                ]),

                dbc.Col([linear_chart], className='col-4 col-md-4 col-lg-5 col-xl-5 col-xxl-5'),           

                dbc.Col([linear_chart2], className='col-4 col-md-4 col-lg-5 col-xl-5 col-xxl-5')]),       

            dbc.Row([
                dbc.Col([dbc.CardBody([spirometry_table], style={'backgroundColor': '#201F21'}, className='mt-3 p-2')],
                        width=2),                                                   


                dbc.Col([linear_chart3], width=5),                                  


                dbc.Col([linear_chart4], width=5)]),                                

        ], width=12),
    ]),

    dbc.Row([html.Img(src="./assets/images/Halitus.png", height=50,
                      style={'width': '200px'})])                                   
], className='m-0 px-3')

callback_pool(app)

if __name__ == '__main__':
    app.run_server(debug=False)