CSS Mobile Adaptation help needed (Plotly Dash app) - html

Question

I have almost finished my web dashboard which can be seen here. Here is the source code. The last few bits I would like to improve are the mobile adaptation of the navbar and the footer. I'm I struggling to position elements properly, and on some devices, it looks worse than on others. I'm not the best when it comes to CSS yet, so I need a little bit of help here.
Few issues I have is the title not being positioned correctly:
.
I would like it to be positioned so the distance between the top and bottom is equal. And I want it to be at the same distance from the left as the burger button is from the right.
Same problem with the footer. it doesn't look very well organized:
or even worse:
I want these elements to be on an equal distance between top and bottom and never overlap, preferably all in one line. I'm sure there is a number of solutions here, but any solution that is simple and makes it looks more organized will be appraciated.
One thing I need to mention is that HTML elements are defined in Python code in Plotly Dash environment, but I'm pretty sure it makes no difference.
I'm attaching some of the Plotly HTML and CSS code here, but the full code is here:
HTML Code of the navbar:
app.layout = html.Div([
html.Nav([
html.Div("Covid-19 global data Dashboard", className="dashboard-title"),
html.A(
id="toggle-button",
children=[
html.Span(className="bar"),
html.Span(className="bar"),
html.Span(className="bar"),
],
href="#",
className="toggle-button"),
html.Div(
id="navbar-links",
children=html.Ul(
children=[
html.Li(html.A("Home", href=homeURL)),
html.Li(html.A('Source Code', href=sourceCodeURL)),
html.Li(html.A("CSV Data", href=sourceDataURL))]),
className="navbar-links active"
)]
HTML Code of the footer:
html.Footer([
html.Div("created by Sebastian Meckovski", id='footer-text'),
html.Div([
html.P(['Find Me On:'], id='find-me-on'),
html.A([html.Img(src=app.get_asset_url('linkedInLogo.png'), style={'height': '2rem'})],
href=linkedInURL),
html.A([html.Img(src=app.get_asset_url('facebookLogo.png'), style={'height': '2rem'})],
href=facebookURL)
], id='footer-links')
CSS Desktop view:
body {
background-color: var(--LightBlue);
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--DarkBlue);
color: white;
}
.container {
position: relative;
min-height: 100% ;
}
.dashboard-title{
font-size: 1.2rem;
margin: .5rem;
}
.navbar-links ul{
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a{
text-decoration: none;
color: white;
padding: 1.5rem;
display: block;
}
.navbar-links li a:hover{
background-color: var(--DarkBlueHover);
}
.toggle-button{
position: absolute;
top: .8rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#footer {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
bottom: 0;
width: 100%;
background: var(--DarkBlue);
color: white;
height: 3.5rem;
}
#footer-links{
display: flex;
}
#find-me-on{
padding-right: 20px;
font-size: .8rem;
}
#footer-text {
margin: .5rem;
font-size: .8rem;
}
Mobile View:
#media only screen and (max-width: 500px) {
.dashboard-title {
font-size: 1rem;
padding-right: 80px;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: flex;
width: 100%;
}
.navbar{
align-items: center;
flex-direction: column;
min-height:45px;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links li{
text-align: center;
}
.navbar-links li a{
padding: .5rem 1rem;
}
.navbar-links.active {
display: none;
}
H2{
font-size: 15px;
}
#footer-text {
margin: .5rem;
font-size: .8rem;
}
#find-me-on{
padding-right: 15px;
}
}

Answer 1

For .navbar class set justify-content property to center, because if you set flex-direction to column, it "rotates" view object, so align-items starts working horizontally.
so:
.navbar{
justify-content: center;
flex-direction: column;
min-height: 45px;
}
And now for navbar horizontal centering: because you set .toggle-button to be absolute, it is set 1rem from right side, while .dashboard-title is centered inside of its parent. To fix this you can simply change margin inside of .navbar class to 1rem, it's now at 0.5rem; Also make sure that .navbar is not centered horizontally by its parent.
After these corrections navbar looks like this:
And for the footer it's also flexbox case. Your images are inside of a element, so you have to vertically center a content.
Image below is only in preview debugging purposes, set your CSS where you previously did.
a{
display: flex;
align-items: center; // Now all <a> element children are centered vertically.
}