Jump to content

Getting text to align in markdown code

Recommended Posts

See image for reference.

The grey words do not align with the "Example Title" or each other. Is there a way to align them? I'm totally stuck. 

Code:

<h2 style="color: font-size: 21px;"> **Example Title**<span style="color: grey; font-size: 21px; font-weight: 400;"> |</span><span style="color: grey; font-size: 17px; font-weight: 400;"> Washington DC </span><div style="color: grey; text-align: right; font-size: 17px; font-weight: 400;"> Photography: Word </div></h2>

Thanks!

Screenshot 2020-09-11 122051.png

Link to comment
  • Replies 4
  • Views 2.1k
  • Created
  • Last Reply

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid.

1204857741_ScreenShot2020-09-11at3_29_48PM.thumb.png.93a428e751431af56ce9fc5b83b9501e.png

You can put the following into a code block like you've done and see how it looks.

<style>

  .bhs-photo-caption-block {
  
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    
    display: -ms-grid;
    display: grid;
    
    -ms-grid-columns: auto auto;
    grid-template-columns: auto auto;
    
    }
    
  .bhs-photo-caption-block--title, .bhs-photo-caption-block--separator {
  
    font-size: 21px;
    
    }
    
  .bhs-photo-caption-block--title {
  
    font-weight: 900;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location, .bhs-photo-caption-block--separator {
  
    color: grey;
    font-weight: 400;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location {
  
    font-size: 17px;
    
    }
    
  .bhs-photo-caption-block--category {
  
    -ms-grid-column-align: right;
    justify-self: right;
    
    }
       
  </style>
  
<div class="bhs-photo-caption-block">

  <div class="bhs-photo-caption-block--title">
  
    **Example Title**
    
    <span class="bhs-photo-caption-block--separator">
    
      |
      
      </span>
      
    <span class="bhs-photo-caption-block--location">
    
      Washington DC
      
      </span>
      
    </div>
    
  <div class="bhs-photo-caption-block--category">
  
    Photography: Word
    
    </div>
    
  </div>

If you're going to use photo captions under multiple images you can put the CSS into a different location. The CSS could go in a code block at the top of the page or Page Settings > Advanced. If you need it on multiple pages then Design > Custom CSS, minus the style tag.

I made a best guess at class names. Please change if needed to meet your needs.

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
13 minutes ago, creedon said:

Lining things up when h tags are involved can be a little tricky as they are block elements. I suggest a different tack by using CSS Grid.

1204857741_ScreenShot2020-09-11at3_29_48PM.thumb.png.93a428e751431af56ce9fc5b83b9501e.png

You can put the following into a code block like you've done and see how it looks.


<style>

  .bhs-photo-caption-block {
  
    align-items: baseline;
    display: grid;
    grid-template-columns: auto auto;
    
    }
    
  .bhs-photo-caption-block--title, .bhs-photo-caption-block--separator {
  
    font-size: 21px;
    
    }
    
  .bhs-photo-caption-block--title {
  
    font-weight: 900;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location, .bhs-photo-caption-block--separator {
  
    color: grey;
    font-weight: 400;
    
    }
    
  .bhs-photo-caption-block--category, .bhs-photo-caption-block--location {
  
    font-size: 17px;
    
    }
    
  .bhs-photo-caption-block--category {
  
    justify-self: right;
    
    }
    
  </style>
  
<div class="bhs-photo-caption-block">

  <div class="bhs-photo-caption-block--title">
  
    **Example Title**
    
    <span class="bhs-photo-caption-block--separator">
    
      |
      
      </span>
      
    <span class="bhs-photo-caption-block--location">
    
      Washington DC
      
      </span>
      
    </div>
    
  <div class="bhs-photo-caption-block--category">
  
    Photography: Word
    
    </div>
    
  </div>

If you're going to use photo captions under multiple images you can put the CSS into a different location. The CSS could go in a code block at the top of the page or Page Settings > Advanced. If you need it on multiple pages then Design > Custom CSS, minus the style tag.

I made a best guess at class names. Please change if needed to meet your needs.

Let us know how it goes.

Thanks for looking into this creedon. I also found an article that was explaining aligning different size fonts next to each other, and yes, I'm realizing it's complicated. This is the article I found, I'll check out yours too. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

I'm not sure this is a proper solution, but I solved it by adjusting line-height for the grey word. 

I'll check out your code and see if it helps, thanks!

See my code:

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

 

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.