2 text styles in 1 text block

Unfortunately I can't link to the website yet.

Im basically trying to add a "TM" to the H1 on the home page, but I can't figure out how to style the TM separate from the heading. 

Did you meant to add a trademark to a H1 heading? You can create markdown block and then type the following:

Trademark<sup>TM
==

Replace the word "Trademark" with your heading.

Not exactly. I want this h1 to remain an h1, but i want the "TM" to be an h4

@Ufamizm

I believe your ultimate intention is wanting to style both the H1 and H4 independently? Try this adding this to a code block:

<h1 class="title">Turning Raw Materials Into Story Telling</h1>
<h4 class="tm">TM</h4>

<style>

.title {
float:left;
}

.tm {
float:left;
/* random styling */
color:red;
font-size:bold;
}


</style>

I got this:

20 minutes ago, aravsanj said:

 

@Ufamizm

I believe your ultimate intention is wanting to style both the H1 and H4 independently? Try this adding this to a code block:

<h1 class="title">Turning Raw Materials Into Story Telling</h1>
<h4 class="tm">TM</h4>

<style>

.title {
float:left;
}

.tm {
float:left;
/* random styling */
color:red;
font-size:bold;
}


</style>

I got this:

Thank you so much! The TM is dropping to the next line. Working on that now. Ill post the solution if i can figure it out

20 minutes ago, Ufamizm said:

Thank you so much! The TM is dropping to the next line. Working on that now. Ill post the solution if i can figure it out

This should adjust the font-size in accordance with the screen size. Try it.

<div class="heads">
<h1 class="title">Turning Raw Materials Into Story Telling</h1>
<h4 class="tm">TM</h4>
</div>

<style>
.title {
float:left;
}

.tm {
float:left;
/* random styling */
color:red;
font-size:bold;
}
.heads {
font-size:2vw;
}
</style>

On 6/15/2021 at 11:28 AM, aravsanj said:

This should adjust the font-size in accordance with the screen size. Try it.

<div class="heads">
<h1 class="title">Turning Raw Materials Into Story Telling</h1>
<h4 class="tm">TM</h4>
</div>

<style>
.title {
float:left;
}

.tm {
float:left;
/* random styling */
color:red;
font-size:bold;
}
.heads {
font-size:2vw;
}
</style>

Appreciate all the help, but this still isnt working. Not sure why. I have very limited CSS/HTMLknowledge

19 minutes ago, Ufamizm said:

Appreciate all the help, but this still isnt working. Not sure why. I have very limited CSS/HTMLknowledge

 

Okay I got the problem. Squarespace already has some inbuilt styling for H1 and H4 which interfering with our code and forcing it to break. Let's try resetting all the squarespace default styles and try to redo it.

<div class="heads">
<h1 class="title">Turning Raw Materials Into Story Telling</h1>
<h4 class="tm">TM</h4>
</div>

<style>
h4 {
    all: initial;
    * {
        all: unset;
    }
}
h1 {
    all: initial;
    * {
        all: unset;
    }
}  

.title {
float:left;
}

.tm {
float:left;
/* random styling */
color:red;
font-size:bold;
}
.heads {
font-size:2vw;
}

.heads h1 {
  font-size:50px;
  }
.heads h4 {
  font-size:20px;
  }
  
</style>

So bazaar. It works until the line breaks, then it goes down to the next line.

@aravsanj

Put the following in a code block.

<style>

  #tm {
  
    display: inline-block;
    font-size : 25%;
    transform : translateY( 75% );
    vertical-align : top;
    
    }
    
  </style>

<h1>

  Turning Raw Materials Into Story Telling<span id="tm">TM</span>
    
  </h1>

Let us know how it goes.

18 minutes ago, creedon said:

Put the following in a code block.

<style>

  #tm {
  
    display: inline-block;
    font-size : 25%;
    transform : translateY( 75% );
    vertical-align : top;
    
    }
    
  </style>

<h1>

  Turning Raw Materials Into Story Telling<span id="tm">TM</span>
    
  </h1>

Let us know how it goes.

Thats it! Thank you man!