I have created a web app using plotly with CCS files in my assets folder. When running the app locally it all looks great. However, when uploading to AWS on Elastic Beanstalk my font sizes get quite a lot bigger. Most notably within bootstrap components (banner and modal). I have found several people asking this question, and I have tried their solutions (webpage zooming and media min-width) but it doesn’t seem to work. Does anyone have any ideas? I would be very appreciative as the deployed app doesn’t look very good at all!
Below is the relevant code (I think)
CSS
body {
background-color: white;
color: black;
margin: 0px;
padding-left: 1vw;
padding-right: 1vw;
font-size: 10px;
width: 100%;
height: 100%;
overflow-x: hidden;
}
h1 {
font-family: "Open Sans";
font-weight: bold;
letter-spacing: 0.2em;
font-size: 2.2em;
padding-left: 0.9em;
}
h2 {
font-family: "Open Sans";
font-weight: bold;
letter-spacing: 0.3em;
font-size: 1.7em;
padding-left: 0em;
padding-bottom: 0.6em;
}
.username-login {
float: right;
padding-right: 1vw;
padding-top: 3vh;
display: inline-block;
justify-content: left;
text-align: left;
}
.username-text {
text-align: center;
padding-right: 0.5vw;
display: inline-block;
color: grey;
line-height: 25px;
/*justify-content: center;*/
}
Python code:
app = dash.Dash(
__name__,
external_stylesheets=[dbc.themes.BOOTSTRAP],
meta_tags=[
{
'charset': 'utf-8',
},
{
'name': 'viewport',
'content': 'width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1'
}
]
)
#Info is the modal css but written as a python dictionary
info_overall = {
'zIndex': '100',
'max-width': 'none',
'overflow-y': 'auto',
'max-height': '80vh',
'position': 'relative',
'margin': 'auto',
'width': '80vw',
'background': '#1e1e1e',
'top': '18%',
}
info_body={
'background':'grey',
'display': 'grid',
'grid-template-columns':'auto auto auto auto auto',
'grid-template-rows': 'auto auto auto auto',
}
You can see that the modal is bigger on the deployed app (overlaps a button) as well as the name and logout text. Many thanks in advance! As you can probably tell I am very new to this!
Deployed APP:
Local APP:
