Okay
  Public Ticket #3439059
custom heading
Closed

Comments

  •  4
    Rado started the conversation

    My custom heading has two words. how do i make the second word a different color. I added a span within the custom text but it does not render it


    9174552279.png

  •  279
    Noah replied

    Hi there,

    The custom heading element cannot use HTML tags.

    Consider using the text block element for example that allows you to use HTML then style the text to what you want.

    Cheers.

  •  4
    Rado replied

    Hi Noah:

    i tried text block  but if i set within the H tag font size, it does not shrink when displayed on mobile devices. 


    I added this 

    <H2 style="font-size: 80px; color: white;"> for everyone
    </H2>

    but then the font stays the same on mobile.

    Then I added @media in the CSS but it did not work.. May be I am using the wrong classes.  can you send me an example

  •  2,958
    Andrew replied

    Hello Rado,

    Thank you for getting back to us.

    It seems that currently you have added to Custom Heading sections and I can't seem to find the Text Block area. Could you add the text block area so we can check this out for ya?

    Alternatively, if you want to continue using Custom Headers, you can add a unique ID or Class to the sections, then add specific CSS targeting this section using the ID/class for mobile devices. Here's a screenshot of the same.

    6606161333.png

    I hope that helps.

    Cheers,

  •  4
    Rado replied

    I prefer a text block but it does not resize on a mobile if i specify the font size in the text block

  •  4
    Rado replied

    I added the text block. but i need to set different font size than in the H tag and then on Media to shrink it. What is the CSS to modify the text block. I can modify at media the custom headings with this code, but how do i make it work for text block


    @media only screen and (max-width: 690px) {
      #centerright.vc_custom_heading h1,
      #centerright.vc_custom_heading h2{
        text-align: center !important;
      }
    }



  •  2,958
    Andrew replied

    Hello there,

    Thank you for getting back to us.

    Could you please share a screenshot of the text block element you want us to look into this?

    We look forward to your feedback.

    Cheers,

  •  4
    Rado replied

    here it is on the site. I keep it below the custom headings for testing. 


    The text box top line "Storied Data" is H2 and the one below is H1


    7513675609.png


  •  4
    Rado replied

    here it is in the editor


    7268610402.png


  •  4
    Rado replied

    I added this code but it does not work.

     /* Style the paragraphs within the custom text block */
      @media only screen and (max-width: 690px) {
      #4every1.custom-text-block h1 {
        font-size: 20px;
      }
      }
      /* Style the paragraphs within the custom text block */
      @media only screen and (max-width: 690px) {
      #4every1.custom-text-block h2 {
        font-size: 16px;
      }
      }


  •  279
    Noah replied

    Hi Rado,

    Could you try the following CSS instead:

    /* Style the paragraphs within the custom text block */
    @media only screen and (max-width: 690px) {
    .custom-text-block h1 {
        font-size: 20px !important;
      }
        
    .custom-text-block h2 {
        font-size: 16px !important;
      }
    }
    

    If it does not work then respond back with backend access - username password with admin role - we try and adjust this from the backend.

    Thanks.

  •  4
    Rado replied

    this works. Thank you.


    One question - if i have to text blocks, do i have to give them different element IDs if i want different font sizes?

  •  8,839
    Tahir replied

    Hey Again,

    Yes, that's correct.

    Thanks.


    ThemeNectar Support Team