Mobile Floating Button position

Site URL: https://sra-draft2.squarespace.com/

Hello!

I currently have this code on my page for the floating "Request a Sample" button on my site (code below). And it's working properly for the desktop version, but when I go on mobile I want the button to be horizontal and on the bottom right corner of the page.

I've been staring at this for such a long time and I can't figure out what I'm doing wrong or missing. Thank you for the help!

Password: Testing123

/* Request a Sample */
#request-a-sample {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 99999;
  transform: translateY(-50%);
}
#request-a-sample a {
  background: #F1944D;
  color: #fff;
  display: inline-block;
  font-size: 20px;
  font-family: AuroraGroteskB;
  writing-mode: vertical-rl!important;
  padding: 30px 8px!important;
  filter: drop-shadow(2px 5px 8px #222)!important;
  position: relative;
  overflow: hidden;
  z-index: 1;
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F1944D;
    z-index: -2;
  }
  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: darken(#2A5697, 0%);
    transition: all .3s;
    z-index: -1;
  }
}
#request-a-sample a:hover {
  background: #f1944D;
  color: #2A5697;
  display: inline-block;
  font-size: 20px;
  font-family: AuroraGroteskB;
  writing-mode: vertical-rl;
  padding: 30px 8px;
  filter: drop-shadow(2px 5px 8px #222);
  color: #fff;
      &:before {
      width: 100%;
       writing-mode: vertical-rl;
    }
}
@media screen and (max-width: 960px) {
  #request-a-sample {
    bottom: 0;
    top: auto;
    transform: none;
  }
}
    #request-a-sample a {
    writing-mode: initial;
    padding: 10px 30px;
    }

On 8/11/2022 at 5:04 PM, caqtec said:

@media screen and (max-width: 960px) {
  #request-a-sample {
    bottom: 0;
    top: auto;
    transform: none;
  }
}
    #request-a-sample a {
    writing-mode: initial;
    padding: 10px 30px;
    }

In this code you closed the @media query.  I don't think thats what you wanted to do. Unless you wanted to put @media screen and (max-width: 960px) { in front of #request-a-sample a { also?

Try putting the media query above the last part to see if it does what you want it too.

@media screen and (max-width: 960px) {                                                                                                                #request-a-sample a {
    writing-mode: initial;
    padding: 10px 30px;
    }

}

Thank you for the suggestion. It didn't work but I did eventually figure it out. I just put !important right after "   writing-mode: initial;" in the media screen.

Thank you for the help!