How do I make my homepage image banner responsive?

[myloandmas]

Hi, I would need some help with my image banner. It is not responsive to all devices, especially the text is not. I have tried searching on google, but just can't get it working. I need the heading, body and button to be looking visually same for all type of devices. I use 2 different images, one for desktop one for mobile. Please help. Website: www.myloandmasboutique.com

[SafeerAhmed]

Hey, 
you can add this code in your sections/main-banner.liquid file

@media screen and (min-width: 750px) {
    #shopify-section-template--23339406197064__image_banner_aQBtmT .banner--desktop-transparent .banner__box {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translate(-10%, -50%);
    }
}

If you still can't resolve the issue, feel free to DM or email your collaborator code and I'll fix it for you.

[myloandmas]

no it did not work, the text still remains the same

[Mustafa_Ali]

@media screen and (min-width: 750px) {
    #shopify-section-template--23339406197064__image_banner_aQBtmT .banner--desktop-transparent .banner__box {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translate(-10%, -50%);
    }
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[myloandmas]

no it did not work, the text is still same