How to get Squarespace page with custom CSS to display properly on mobile?

I've been making this website for a friend and pretty much have it done and ready to go except that the page does not display properly on mobile. Right now I attempted to get the mobile specific CSS to display on mobile pages but it is not working. This is my CSS:

footer {
    display:none  
}

#collection-5de6d28545f1a7075b7a2741 #canvas{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#collection-5de6d2e045f1a7075b7a34a3 #canvas{
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
  background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5df035e05d133c6a73380fa1/1576023521067/IMG_1683.JPG)
}

#collection-5de6d306623e3a140935efd4{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
  background-position: cover;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#collection-5de6d306623e3a140935efd4 #canvas {
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
   background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5e13d4a0718bc301c1c7efcd/1578357920526/512679.jpg)
}

#collection-5de7d7f5cb49636dc8f582f0 #canvas{
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
   background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5e13d4a0718bc301c1c7efcd/1578357920526/512679.jpg)
}

#collection-5de7f3679b018c732a115e55 #canvas {
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
   background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5e13d4a0718bc301c1c7efcd/1578357920526/512679.jpg)
}

.page-divider {
  display: none
}

 .logo-image .logo img{
   max-height: 200px;
   max-width: 400px;
   position: relative;
   right: -50px;
   top: -50px 
 }

.info-footer-wrapper {
  display: none
}

@media screen and (max-width: 641px) {
body {font-size: __ }
h1 {font-size: __ }
h2 {font-size: __ }
h3 {font-size: __ }
}

@media screen and (max-width: 500px) {
  #header {
    float: none;
    display: block;
    text-align: left;
  }}

I think my issue is with the Navigation bar and custom logo image I added to the header. It seems that the logo is not resizing properly to allow everything else on the page to display properly on mobile. The Squarespace page can be found at https://richiequake.com and the password to view it is Help123. What do I need in the CSS to have the page adapt properly to mobile screens?