Relocate Image Banner Text to a custom spot

[tallowbar]

Hi, I would like to move the text and button to the far left hand side as I've shown in the image attached. At the moment its in the "Top Left" Placement and it's too far up and not left enough.

Then on the mobile view it's also in the wrong spot. I would like it higher and if possible to make the text (for mobile view only) smaller? As it's too big for the mobile view currently.

[Moeed]

Hey @tallowbar 

Can you share your Store URL and Password if enabled?

Best Regards,

Moeed

[tallowbar]

3de7b3.myshopify.com

There shouldn't be a password.

I am working on a duplicated theme at the moment with an updated image, my live website still has old image and layout.

Thanks!

[tallowbar]

https://chk8s37fr38s1n6z-77163168064.shopifypreview.com

This is the preview for the other theme I'm using if that helps more

[IKRDE · Accepted solution]

Something like this?

Need to play around with the values etc.

@media screen and (min-width: 750px) {
    .banner--desktop-transparent .banner__box {
        position: absolute;
        top: 20vh;
        left: -20vh;
    }
}


@media screen and (max-width: 749px) {
    .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
        background: transparent;
        top: 12vh;
        position: absolute;
    }
}

[tallowbar]

Thank you that is absolutely perfect! 
Do you know if there's a way to adjust heading text size to make it smaller only on the mobile version?

[IKRDE]

Try this can not really check in console

@media screen and (max-width: 749px) {
    .banner__heading.inline-richtext.h1 {
        font-size: calc(var(--font-heading-scale) * 2rem);
    }
}

the 2rem you can play around

maybe 2.2 or 1.9 etc.

[tallowbar]

Thank you that worked!