Jump to content

Stop line break in title using markdown

Recommended Posts

Posted
<h2 style="color: black; font-size: 20px;"> **Example Title**</h2><span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span>

<span style="color: black; letter-spacing: 0.04em; font-size: 17px; font-weight: 300;"> **Example Title**</span> <span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span>

EDIT: Using Markdown

So I'm trying to use the heading font, with a paragraph font next to it (similar to the second example). However using the h2 forces a line break. Is there anyway to prevent this from happening? And to have it only happen in this instance. ie. not across the site. 

To clarify. In the first bit of code I try and use the h2 heading but it causes a line break. 
In the second bit of code I don't use the h2 to show what I want it to look like in terms of placement. But I'd like to use h2 rather than a large version of the paragraph size. 

Thanks.

Annotation 2020-09-01 161841.png

  • Replies 4
  • Views 1.9k
  • Created
  • Last Reply
Posted

Edit code 1 to

<h2 style="color: black; font-size: 20px;"> **Example Title**<span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span></h2>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 9/1/2020 at 5:50 PM, tuanphan said:

Edit code 1 to


<h2 style="color: black; font-size: 20px;"> **Example Title**<span style="color: black; letter-spacing: 0.09em; font-size: 20px; font-weight: 400;"> |</span> <span style="letter-spacing: 0.09em; font-size: 14px; font-weight: 400;"> Washington DC </span></h2>

 

This is great, but the second part (Washington DC) switches to the h2 style. 

I'm looking for the left side to be h2 while the right is p2. I tried messing around with the code but I can't find anything that stops an auto line break when using different styles like that. 

Anyways, if the answer is it's not possible that's okay. 

  • 2 weeks later...
Posted
On 9/4/2020 at 11:03 AM, Marzon said:

This is great, but the second part (Washington DC) switches to the h2 style. 

I'm looking for the left side to be h2 while the right is p2. I tried messing around with the code but I can't find anything that stops an auto line break when using different styles like that. 

Anyways, if the answer is it's not possible that's okay. 

Can you share linkto page where you inserted Markdown? I can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted
On 9/12/2020 at 9:15 AM, tuanphan said:

Can you share linkto page where you inserted Markdown? I can check easier.

I'll provide links below

<h2 style="
           display: inline; 
           font-weight: bold;
           "> Little Peek
</h2>
<h2 style="
           display: inline; 
           "> |
</h2> 
<h2 style="
           display: inline;
           font-size: 17px;
           line-height: 31px;
           vertical-align: bottom;
           color: grey;
           ">Washington DC
</h2>

 

Here was my solution. I also did a version with the paragraph style but the code block to the right was not lining up?? The weirdest part was that it does line up in the editor, just not in the live site (p version)... I did however get it to line up with the example above where I use (h2 version)

To reiterate: I was able to get the grey "Washington DC" to line up with the main title. But the text on the right side, "Photography: Artist Name" was only lining up using the (h2 version) and not the (p version).

I can live with this solution, but please, if you know something more elegant do tell!

Thanks.

 

 

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.