FOOTER ON MOBILE - Increase padding at top / Change font size for mobile

Hi, Can I please get some help with custom code to fix how many footer looks on mobile. Works fine on desktop, just need code for mobile and ipad. 

1. How can I add more space/padding between the image block and the footer (so there is more of a gap between the image and the word OPENING? Just for when viewed on mobile/ipad

2.  How can I change the font size for when viewed on just mobile/ipad? 

THANKS!

Im a serious novice and only began learning some weeks ago thanks to here and my own site, so I could be completely wrong. Without having your websites address i can only guess though. A code like this SHOULD work i think. the @media screen and (max-width: xxx) denominator singles out basically cell phone displays only. then add the block id of your footer, and adjust the margin. Still need your url tho. I hope this works lol

notes:

1 -> *make sure mobile view is on so you can SEE changes*
2-> if you dont already have it, install chrome extension "Squarespace ID Finder" so you can easily find the block IDs on your page for one of the steps below

Go to "Design> Custom CSS" and enter :

//this is for footer spacing
@media screen and (max-width: 800px) {
#BlockIDofYourFooter {
  margin-top: ENTERANUMBERHEREpx; 
  }
}