How can I use two colors in one H1 Custom Headline?

Support
#1

Hello Support,

I currently have two H1 custom headlines on my landing page, one word each, with each word having it’s own style. The problem is it looks terrible on responsive devices. I want to fix that and replace the two H1 headlines with just one H1 custom headline on my landing page.

In my Custom CSS I wrote:

h1 .hero{
{
color: #2969AE;
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
span{
color: rgb(3, 3, 3);
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
}
}

The site is: http://westsidevirtualwebdesign.com

Thank you in advance.

#2

Hello,

Thank you for writing in!

I have checked your site and the title have different styles, but you can improve it adding this additional CSS code:


@media screen and (max-width: 767px) {
  #x-section-1 h1 {
     font-size: 58px !important;
  }
}
#3

Hi John,

Thanks for your note. Before I received your note, yes, I solved it without using Custom Global CSS code

Thank you for your help again as always.

#4

Hey,

You can change the H1 size using this global custom code:

body h1 {
  font-size: 18px !important;
}
#5

I used this code and it worked.

@media screen and (max-width: 767px) {
#x-section-1 h1 {
font-size: 58px !important;
}
}

You can close this thread.
Thank you again very much for your help.

#7

Thank you!