Jump to content

Stop line break in title using markdown

Go to solution Solved by Marzon,

Recommended Posts

<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

Edited by Marzon
Link to comment

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Link to comment
  • 2 weeks later...
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
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.

 

 

Edited by Marzon
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.