I've made some changes to my CSS file that works on the mobile display properties, but every time I run 'firebase deploy' nothing changes on my domain. All of my other CSS properties are running just fine. My goal is to hide one calendar on mobile, and display the other. You can see what's happening in my site.
@media screen and (max-width: 600px){
.computer-calendar{
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
@media screen and (min-width: 600px){
.mobile-calendar{
visibility: visible;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
First I tried changing the .body background color and it didn't work, so the solution was to add a new file 'mobile.css', link to it in index.html, and then redeploy the app.
Edit: After more changes, I've noticed that CSS files can only be deployed once.
@media screen and (max-width: 600px){
.computer-calendar{
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
@media screen and (min-width: 600px){
.mobile-calendar{
visibility: visible;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}