Banner Size and Buy Button not Overlaping on Mobile View

Hi, I am having a problem with the mobile view of my Shopify store.

The desktop and full-screen view are perfectly fine and I’d like to keep it that way. However, the problem is with the main slide, on the mobile view home page.

When I put it into mobile view, the banner-which I imported from Canva is less than the top half of the slide. The next problem I have is that the “Buy Button”, is the whole bottom half of the slide by itself. I need these two to be overlapping just as they are on my desktop and full-screen view. Please help, Thanks!

Here is a link to a google doc with the Desktop vs Mobile view screenshots: https://docs.google.com/document/d/1gKqzUWn21OahMeIIWKSpSfDxbJshH-iBUZzBQnjhWI8/edit?usp=sharing

You can have this solved if you can work with the image size of the mobile view. Try to know the mobile banner size then design the size banner on canva. And for the button, can I get to know the theme you are using.

I am using the refresh theme, if I change the size in canva and import it back onto my sight, won’t it effect my good desktop view?

Okay, That’s nice.

Well, the button adjustment will require more step of action reason because you are using a free theme which is not fully optimized for mobile on like the paid theme.

But if you will need an assistance, you can provide your store URL for proper view. From there, I can help you out on the next step

https://38qs9g3ynrajyxnb-67180593468.shopifypreview.com there is the URL for my store.

I can see you have only gotten the banner designed…from the mobile view here the button position is properly place based on the mobile setting. You will need to have the complete website done so as to have the mobile view properly displayed. If the website is not properly designed and well completed, we can have the best of it mobile displayed

You can give an access to your store to have it completely and professionally done.