Image with text overlay - Debut Theme

Solved
Peekaboo
Tourist
9 0 5

Hello, I am trying to shift the text to the left of the image? How can I do that?

https://peekaboo-play-box.myshopify.com/
pw: auweey

Thanks in advance.

.page-width.text-center {
    width: 44%;
    float: left;
    margin: 0;
}

Hello
Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
KetanKumar
Shopify Partner
20578 2130 7791

This is an accepted solution.

@Peekaboo 

Thanks for post 

Welcome to the Shopify community!
and Thanks for your Good question.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

 

.hero__inner .page-width.text-center {
    text-align: left !important;
    max-width: 500px;
    margin: 0;
}
.hero__inner .rte-setting.mega-subtitle {
    max-width: 100%;
}

 

After this code view

KetanKumar_0-1607583256755.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Peekaboo
Tourist
9 0 5

that works, thank you so much!

0 Likes
Peekaboo
Tourist
9 0 5

Hi @KetanKumar, while viewing in mobile view the text are over the image, how can I move the text up & change to smaller font size?

Thanks you in advance.

image.png

KetanKumar
Shopify Partner
20578 2130 7791

This is an accepted solution.

@Peekaboo 

Thanks for post 

@media only screen and (max-width: 749px) {
.hero__inner .page-width.text-center {
max-width: 330px;
}
.hero__inner .page-width.text-center h2.h1.mega-title {
font-size: 24px;
}
.hero__inner .rte-setting.mega-subtitle {
font-size: 15px;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Peekaboo
Tourist
9 0 5

Thank you @KetanKumar  !

KetanKumar
Shopify Partner
20578 2130 7791

@Peekaboo 

Thanks for your feedback and support.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JenaSunn
Excursionist
30 0 10

 Hi, I have the same issue and I copied this code but it's not working, text is still in the middle of the image. Here's a screenshot of my code. Please help. 

css_image text overlay.jpg

KetanKumar
Shopify Partner
20578 2130 7791

@JenaSunn 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing