For example: Check this Shopify theme: https://themes.shopify.com/themes/colorblock/styles/default?price%5B%5D=free&surface_inter_position=1&surface_intra_position=12&surface_type=all
It depends on how it code in the HTML, the example you give is with the link. The header is Inside in the
tag and there is with the link. When the header are separated with other tags we can change the color of every words separate.
And not like this:(for example)
In order to separate theme, it needs a developer to add some tags, if you are able to locate the html in your store you can add some tags.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
I have tried pagefly and with that, I am able to achieve the desired results but I am thinking of doing it within the Shopify code instead of adding more apps to it.
Can you please check this website https://sponsorenergy.com/
and help where I can change this specific code in theme editor?
Thanks for replying to the post
To break the line i believe this code will work:
@media screen and (min-width: 990px){
.slideshow__text h2.banner__heading.h1 {
width: 30vw;
}
}
Thanks for the sharing, I was just playing all around and i got this. 
Check the code.
@media only screen and (min-width: 749px){
#ImageWithText--template--16931716595954__image-with-text > h2:first-line{
color: #FF00A3;
}
h2.image-with-text__heading.inline-richtext.h1 {
width: 600px;
}
}
And Save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
I see it’s breaking the heading but it’s appearing like this and not changing the color:
I see you have mentioned the template id, Is there any way we can apply this to all the sections?
Again, thank you so much for looking into this. I really appreciate it. I have been looking for this solution for a long time and finally, I posted here and found an amazing person 
Yeah, I did try to break the sentence to make the “Secure Your” energy on the first line. Cause the code only calls the first line. When we take out the section id it would be apply for all headers with the h2 tag. The 2nd Image with text you have is already in pink.
If the break line is not working this will be the result.
And this is the code. I call them One by one.
@media only screen and (min-width: 749px){
#ImageWithText--template--16931716595954__image-with-text h2:first-line,
#ImageWithText--template--16931716595954__56061dd0-21b2-4ceb-8fba-e08240111fbc h2:first-line,
#ImageWithText--template--16931716595954__fc366990-684d-4e69-b701-296ff3472ac2 h2:first-line {
color: #FF00A3 !important;
}
#ImageWithText--template--16931716595954__b9e449c1-f874-4f38-aea7-a7b0ef998065 > h2:first-line {
color: black !important;
}
}
And Save.
Your Welcome! And welcome to the community. There is also a lot of developer here willing to help.
We can break it but every screen it will change. But I didnt add the design on the mobile screen. You can check this code. Same Instruction.
@media only screen and (min-width:749px){
h2.image-with-text__heading.inline-richtext.h1 {
width: 80%;
}
}
And save.
Result:
Sorry, Im only playing with the css. If you like to hire a developer. Let us know.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Sure, I would like to know the pricing. How can I discuss that?
This code is working on the desktop version but on the mobile version, it’s not showing up.
