Full screen hamburger menu – fonts going off the page

Site URL: https://www.onetouchstudio.com.au/home

Hi there!

I'm wondering if I could please get some help with my full screen menu design. I would love my menu to work exactly like the one on this website: https://www.jazzejervis.com.au/

I would like my images and text to grow/shrink with the size of screen but still look good on all screens (haven't done mobile yet). See this video for an example of how the text goes off the screen.

I would also like the exit cross of the hamburger not not scroll and disappear with the menu when it's open (I don't want to turn off scroll all together if possible).

Here is my current code for my site: 

//show burger icon//
@media screen and (min-width:768px) {
.header-burger {
    display: flex !important;
    justify-content: flex-start !important;
  z-index: 1 !important;
}
.header-nav {
    display: none;
}
.header-actions-action {
    display: none !important;
}
}
@media screen and (min-width:768px) {

  
//HEADER SECTION
  
  /* Fix footer invisible behind page content */
footer.sections {
     z-index: 9999999 !important;
 }
  
#header {
  z-index: 99999999 !important
}
  
  
  
/* change footer 2 sections to 100% height and 50% width */
footer.sections section:nth-child(1), footer.sections section:nth-child(2) {
    width: 100vh;
    height: 100vh;
    position: fixed;
    z-index: 999;
    left: 0;
}
  
footer.sections section:nth-child(1) {
    left: 0;
}
  
/* move footer section 2 to right 50% */
footer.sections section:nth-child(2) {
    left: 50%;
    right: 0;
}
  
/* effect on 2 sections when click burger menu */
  body footer.sections section:nth-child(1), body footer.sections section:nth-child(2) {
    transition: transform 1.2s ease;
      top: 0px !important;
}
body footer.sections section:nth-child(1) {
    transform: translateY(-150%);
    transition: transform 0.75s ease;
}
body footer.sections section:nth-child(2) {
    transform: translateY(150%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(1) {
    transform: translateY(-0%);
    transition: transform 0.75s ease;
}

body.header--menu-open footer.sections section:nth-child(2) {
    transform: translateY(0%);
    transition: transform 0.75s ease;
}
}

//hide logo when header is open
@media only screen and (min-width: 768px) {
  .header--menu-open .header-title-logo {
    visibility: hidden;
  }
}

Thank you so much in advance!!

You try using Classic Section for Right Section