Why is my mobile version not displaying correctly?

[Sandra45MJ]

Hi all, recently I was helped by Shopify's wonderful customer service with moving the button on my home page banner, however I just discovered it's not in the proper place when I enter from my phone. It's showing up in the middle of the banner, while it should be under the writing on the banner (position 7, 17 or something like that). Also, the banner overall is not fitting properly on the phone screen. 

Help will be highly appreciated!

Website url: www.crueltyfreebabe.com

Password: neunoz

[Kinjaldavra]

Hello can you please share your preview link 

[Sandra45MJ]

Sure, here it is:
https://crueltyfreebabe.com/?_ab=0&_fd=0&_sc=1&key=4ccbdc0d04ca54ad768ce7fcb4d32e5c5a224831baf332a7f...

[Kinjaldavra]

hello @Sandra45MJ 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px){
#shopify-section-hero-1{
	--color-image-overlay: none;
}
.hero#Hero-hero-1 {
    background-size: contain;
    height: 100%;
}
.hero__inner {
    display: block;
    padding: 0;
}
.btn.hero__btn{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(10px, 10px);
}
}

[Sandra45MJ]

Thank you! However, while the banner is good, the button is in the wrong place. See photo attached.

Thank you in advance!