cover page buttons side by side in mobile view

i'm trying to find a way for my cover page image to resize in mobile view (flatiron template).  currently, it gets in the way of the navigation buttons in mobile.  i know this is a problem that a ton of people have had but i can't seem to find a code that works.  

if possible to resize and move the navigation buttons to the top/in line with the social icons when in mobile view, that would work too.

any advice/help would be greatly appreciated.

Add to Cover Page Header

<style>
  @media screen and (max-width:640px) {
  .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked {
    width: 100%;
    display: flex !important;
    flex-direction: row-reverse;
}
    .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice:not([data-content-empty="true"])~.sqs-slice:not([data-content-empty="true"]) {
    width: 60%;
}
  }
</style>

hello, thank you for this.  i think it will work if i can get the buttons to line up side by side instead of stacked on top of each other.  so, all icons lined up evenly at the top of the screen.  is that possible?

<style>
  @media screen and (max-width:640px) {
  .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper.stacked {
    width: 100%;
    display: flex !important;
    flex-direction: row-reverse;
}
    .sqs-slide-wrapper[data-slide-type="cover-page"] .responsive-wrapper .sqs-slice:not([data-content-empty="true"])~.sqs-slice:not([data-content-empty="true"]) {
    width: 60%;
}
    div.responsive-wrapper>div:nth-child(2) {
    width: 70% !important;
}
    div.responsive-wrapper>div:nth-child(2) ul {
    display: flex !important;
}
    div.responsive-wrapper>div:nth-child(2) ul>li:first-child {
    margin-right: 10px !important;
}
    
  }
</style>

it worked and looks great.  thank you so much.