Custom CSS gallery height for York template

Hello,I'm trying to customise the height of the .sqs-gallery-design-strip-slide gallery in the York template but only for mobile.

I've tried the following but it has no effect:

@media screen and (max-width:640px) { .sqs-gallery-design-strip-slide { height: 200px; } }

Any ideas please?Thanks

So, I managed to enlarge the images with the following code but instead of pushing the footer down the page it overlaps it:

@media screen and (max-width:640px) { .sqs-gallery-design-strip { height: 300px; } }

https://www.dropbox.com/s/q9kog8g8dksjw7n/Screenshot%202019-07-30%2018.59.38.png?dl=0

Thanks

Dont suppose you found a solution for this have you? I cant find any help anywhere on this. 

That code is so close to what i want but like you my text doesnt react and move with the galleries on my page so it all overlaps. 

Really hoping someone has a solution, I cant believe more people dont have an issue with this, the mobile carousel is tiny. squarespace really should change the default settings on this