How can I shift text to the left of an image in Debut Theme?

[Peekaboo]

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.

[KetanKumar · 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

[oscprofessional]

.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

[JenaSunn]

 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. 

[KetanKumar]

@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.

[JenaSunn]

Hi, thanks for your quick reply. 

https://finamari.com/

Thank you.

[KetanKumar]

@JenaSunn 

thanks for the details is this fine?

[JenaSunn]

Hi, could you move it a little more to the right.  Something like this placement (see image). Thanks a lot!

[KetanKumar]

@JenaSunn 

Yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

@media only screen and (min-width: 750px) {
.hero__inner .page-width {float: right;}
}

[JenaSunn]

Hi @KetanKumar, it worked!  🙂 

One last thing though, I forgot to ask maybe you could help me too on how I can remove the opacity so I can have my image like this vivid.  Thanks so much!

[KetanKumar · 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

[Peekaboo]

that works, thank you so much!

[Peekaboo]

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.

[KetanKumar · 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;
}
}

[Peekaboo]

Thank you @KetanKumar  !

[KetanKumar]

@Peekaboo 

Thanks for your feedback and support.