I have updated the code to break the headline and change the color of the heading with this code:
@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;
}
}
@media only screen and (min-width:749px){
h2.image-with-text__heading.inline-richtext.h1 {
width: 80%;
}
}
But the problem is this code isn’t working on the mobile devices. How can we update the same feature on the mobile?
On the Desktop it appears like this:
On mobile like this :
1 Like
Hi @kapooraayan1
Looks familiar on me. Wont be shown in the mobile, because there is media query. try to remove it.
#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;
}
h2.image-with-text__heading.inline-richtext.h1 {
width: 80%;
}
And save.
Im not sure if it will work maybe mobile have different selector,.
1 Like
Thanks for replying. I have updated the code but it only changes the colour of the first word which is inconsistent with the website:
@BSS-Commerce Can you please check this one?
Yeah, I know. Thats is why I didnt include the mobiles screen. But lets see maybe I can think of another solution. 
1 Like
Hi @kapooraayan1 ,
Please keep the separate CSS for desktop according to your old comment, and try this for mobile screens:
First, go to the customize section of the theme and change it to bold only the words that need to be colored
Next, go to Online Store → Themes → Edit code and find the base.css file, add this code at the end of the file:
@media only screen and (max-width: 748px){
h2.image-with-text__heading.inline-richtext.h1 {
width: 80%;
font-weight: bold;
color: #fff;
}
h2.image-with-text__heading.inline-richtext.h1 strong {
color: #FF00A3 !important;
}
}
Result:
Hope it helps @kapooraayan1
1 Like
Thanks for replying to the post. It’s definitely changing the colour on the mobile version but on the desktop, it’s leaving the text as non-bold which appears a little off on the website. Is there something where we do not need to change the text format?
