Change button position on mobile relative to the device

Store Design
1

Hey,

I am using the Narrative Theme and moved a button on the slideshow up. But on different mobile phones with different screen sizes the button overlaps the text. How do I make the button relative so it wont overlap the text shown in the pictures below.

This is the code I used to change the postion of the button

.slideshow__heading-cta {
  opacity: 0;
  margin-bottom: 97%;
  position: relative;
  transition: opacity 0.6s ease-in;

  
  @include media-query($medium-up) {
    margin-top: 125%;
    margin-right: 76%;
    position: relative;
  }

Here are the pictures where you can see how the button overlaps the text:

Here is how it currently is on a few older mobile devices
Here is how it currently is on a few older mobile devices539×852 84.4 KB

Here is how I want it to be on every mobile device regardless of the screen size
Here is how I want it to be on every mobile device regardless of the screen size507×921 98.5 KB

URL: www.solarstarmaps.com

PW: g531

Thank you for your answers!

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
@media only screen and (max-width: 767px){
a.slideshow__heading-cta.btn {
margin-bottom: auto!important;
}
}
3

Hey,

now its stuck in the middle how do I move it up a bit?

Do I just have to add to the new code another margin-bottom: 320px; ?

4

Add this one code.

@media only screen and (max-width: 767px){
a.slideshow__heading-cta.btn {
margin-bottom: 225px!important;
}
}
5

I applied it but it seems to still overlap the text on some devices.

6

Look like I fixed it with this code:

@media only screen and (max-width: 767px){
a.slideshow__heading-cta.btn {
margin-bottom: 340px!important;
}
}@media only screen and (max-width: 370px){
a.slideshow__heading-cta.btn {
margin-bottom: 275px!important;
}
}

I made it so when an older device has a smaller screen width it gets moved down.

Thanks for the help!