How to Position Text on the Left Side Without Overlapping the Image in Mobile View on Shopify?

[Hrayriggg]

Hi all,

I'm having an issue with text overlapping the image on mobile view in my Shopify store. I want the text to appear on the left side of the image without covering it.

Does anyone know how to adjust the layout or use CSS to achieve this?

Thanks in advance!

[Moeed]

Hey @Hrayriggg 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Hrayriggg]

this is my website Url 

https://g44ntm-mc.myshopify.com/

[Moeed]

Your website is password protected, can you share the password as well?

Best Regards,

Moeed

[Hrayriggg]

ENGAaa9P

[Moeed · Accepted solution]

Hey @Hrayriggg 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
h2.banner__heading.inline-richtext.h1 {
    width: 80%;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Hrayriggg]

Thank you so much for your help! I really appreciate you taking the time to solve my problem.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Hrayriggg]

thank you

[Hrayriggg]

I couldn't find the inbox section. Sorry, I’m new to this community. Could you please send me a message?