Jump to content

2 text styles in 1 text block

Recommended Posts

  • Replies 10
  • Views 829
  • Created
  • Last Reply

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.

Link to comment

 

@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:

a.PNG.172e418c2785af25c3a9035f584e90a5.PNG

Link to comment
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:

a.PNG.172e418c2785af25c3a9035f584e90a5.PNG

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

Link to comment
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>
Link to comment
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

 

Screen Shot 2021-06-17 at 10.07.05 AM.png

Link to comment
19 minutes ago, Ufamizm said:

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

 

Screen Shot 2021-06-17 at 10.07.05 AM.png

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>

 

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.