Dash as Responsive CSS grid, elements not stacking

Dash Python
1

Hey, I’m trying to create a four column grid dash web app with an external stylesheet. But I can’t figure out how to make it responsive and stack elements on top of each other. I have been playing around with different media query settings but with no success.

I applied tcbegley’s answer using meta tags to a similar problem but couldn’t get there yet. Here is my Dash code:

        external_stylesheets = ['/assets/grid_karte.css']
        app = dash.Dash(external_stylesheets=external_stylesheets,    
        meta_tags=[{"name": "viewport", "content": "width=device-width, initial-scale=1"} ])

        content = html.Div(className = 'main',
               children= [
          
         html.Div(className= 'Logo' ), ## CSS background image goes here

          
        html.Div(className='Sidebar', 
                children =[
                     html.H3('SidebarSidebar'),
                     html.P('Sidebar Text: Sidebar Text Sidebar Text Sidebar Text Sidebar Text'),
                     ]

                    ), 

         html.Div(className = 'Count', children = [

                    html.P('Count of X, Count of Y'),


                    ]),


        html.Div(className = 'Map', 
                children = [
                    html.Div(className= 'content_main_map', children =[

                                dcc.Graph(id='plot',
                                  figure=fig
                                 )

                                                            ])
         ])
      ]
  )

      app.layout = html.Div([dcc.Location(id="url"), content])

And this is my CSS:

.main {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr ;
   grid-template-rows: 0.25fr 1fr 1fr 1fr ;
   grid-gap: 10px;
   grid-template-areas:
"Logo Logo Logo Logo"
"Sidebar Map Map Map"
"Sidebar Map Map Map"
"Count Map Map Map"
					;

  background-color: rgb(38,38,38);
  grid-auto-flow: dense; 

  overflow: hidden;
  color: black;

	
 grid-area: Logo; 
 grid-column-start: 1;
 grid-column-end: 5;

 grid-row-start: 1;
 grid-row-end: 1;
}

.Logo { 
	
	background-image: url('/assets/logo.PNG');
	background-position: center;
	background-repeat: no-repeat;
	
	width: auto;
	height: auto;
	background-size: cover;
	object-fit: fill;
	display: block;
}

.Map { 
	grid-area: Map; 

	grid-row-start: 2;
	grid-row-end: 5;
	
	grid-column-start: 2;
	grid-column-end: 4;

 }


.Sidebar { 
	grid-area: Sidebar; 
	grid-template-columns: 1fr;
	
	grid-row-start: 2;
	grid-row-end: 4;
	
	padding: 1em;
	grid-column-start: 1;
	grid-column-end: 1;


	border-style: double;
	background-color: #E0E6BD;
 }


 .Count { 
	
	grid-area: Count; 
	
	grid-row-start: 4;
	grid-row-end: 5;
	
	grid-column-start: 1;
	grid-column-end: 1;

	border-style: double;
	background-color: #E0E6BD;		
}

And finally my media query :

@media screen and (max-width: 575px) {
 .main { 
grid-template-rows: 30px 200px 75px 50px;  
grid-template-columns: 1fr;

grid-template-areas: 
  "Logo"
  "Map"
  "Count"
  "Sidebar";


	}
}

Thank you very much in advance :relaxed:

2

So I solved the issue, and realized that it is not a good idea to mix different ways to determine the grid layout.
Basicially don’t mix

 grid-area: Logo; 
 grid-column-start: 1;
 grid-column-end: 5;

and

   `grid-template-areas:`
"Logo Logo Logo Logo"
"Sidebar Map Map Map"
"Sidebar Map Map Map"
"Count Map Map Map"

Stick to either one of them. Although I think grid-template-areas: is the way to go.