Button Label on desktop view is different from mobile view

[LucID]

Hey guys and gals, I have researched for hours and tried plugging in solutions from previous discussions but non have worked so I have no other option but to ask personally in the forums. 

My issue is that my button label on the slideshow in desktop view is completely different from mobile view

I provided some pics without exposing too much of my site.

(Desktop):

button label on my desktop view is even between the site just roughly about in the middle.

(Mobile):

Mobile View

Annnnnnd boom, my button label took a poop and fell under my slideshow big and bulky not the same color and everything

Heres what I messed with 

And here is what's at the end of my code 

SUPER Thanks in advance

[PeanutButter]

Please share your site url and what theme you are using

[LucID]

Emailed it to you @ hello@peanutbutter.es

[PeanutButter · Accepted solution]

Added this at the end of theme.scss.liquid to meat your requirements:

/*******************************************/
/******* Add customizations below **********/
/*******************************************/

/*
 * Slideshow button - show over slide in mobile
 * Author: https://peanutbutter.es
 */

// Make button smaller in mobile:
.hero__text-content .btn {
  @include at-query($max, $medium) {
  	padding: 8px 16px;
  }
}
// Hide button below slideshow
.hero__adapt-text-wrap {
  display: none !important;
}
// Prevent default hide of button over slideshow
.hero--adapt .hero__text-align {
  @include at-query($max, $medium) {
    display: table !important;
  }
}