Adding Custome CSS but no changes happening

Site URL: https://dove-okra-rb73.squarespace.com

Hello

I am trying to add code to a Squarespace site for the first time.  I normally just find a work around but using 7.1 I'm unable to.

Two main problems

Headers on Full screen look great but are oversized on mobile.

I have this code from @tuanphan when I add it and save nothing at all happens.

@media screen and (max-width:640px) {
body.site-title .logo a {
    font-size: 20px;
}
}

I also tried numerous different code options yesterday for changing the size of the home page gallery on mobile view.  The first code I put in worked but for the pictures on the page not the gallery so I deleted and tried again with some other codes but from this point onwards, no changes happened.

I am assuming it's something I did wrong when deleting the initial additional code so I apologise now for being so dense.  If anyone can help me I would appreciate it.

https://dove-okra-rb73.squarespace.com

Your site is private. Can you setup password & share url again?

Apologies @tauphan https://dove-okra-rb73.squarespace.com C0rn1shL1f3!

19 hours ago, ka00876 said:

Apologies @tauphan https://dove-okra-rb73.squarespace.com C0rn1shL1f3!

You want to resize logo on mobile?

Add this CSS

/* Mobile logo */
@media screen and (max-width:767px) {
.header .header-title--use-mobile-logo .header-mobile-logo img {
    max-height: 100px !important;
}
}

@tuanphan Hi Tuanphan.  No I want to make top banner smaller in the mobile version but none of the changes I make to the css effect the layout. 

Thanks Kelly

23 hours ago, ka00876 said:

@tuanphan Hi Tuanphan.  No I want to make top banner smaller in the mobile version but none of the changes I make to the css effect the layout. 

Thanks Kelly

Add to Design > Custom CSS > Then save & reload the site

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}