Jump to content

font for meta data on blogs?

Go to solution Solved by JayVanDyke,

Recommended Posts

Hi there! I am working on the blog section of my website. I would like the meta data to show but the alignment / styling of the metadata is a bit off. 

image.thumb.png.deaa03212ab992e759b46e76a1dfeb1e.png

  1. How can I get it so that the alignment of the date, bullet point, and the tag is all in one line? Currently, it looks like BLOG RECIPE is a subscript
  2. Would it be possible to change how the date shows up as September 5, 2024 instead of 9/5/2024?

 

Thank you so much!!

Screenshot 2024-09-08 at 9.25.50 PM.png

Link to comment
  • Solution

@elisasunga The date format is something thats a little more complicated and I'm pretty sure needs javascript in this spot but you could try this in custom css to see if you can get it aligned. There's some weird stuff in Squarespace's css there that's causing this.

.blog-basic-grid .blog-meta-section * {
  font-size: 13px !important; //change to desired font size
}
.blog-basic-grid .blog-meta-section {
  padding: 15px 0; //adjust the first number to add spacing above and below.
}

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Link to comment
10 hours ago, elisasunga said:

Hi there! I am working on the blog section of my website. I would like the meta data to show but the alignment / styling of the metadata is a bit off. 

image.thumb.png.deaa03212ab992e759b46e76a1dfeb1e.png

  1. How can I get it so that the alignment of the date, bullet point, and the tag is all in one line? Currently, it looks like BLOG RECIPE is a subscript
  2. Would it be possible to change how the date shows up as September 5, 2024 instead of 9/5/2024?

 

Thank you so much!!

Screenshot 2024-09-08 at 9.25.50 PM.png

For the date format, i find the following free tool provided by Beyondspace which  is required at least business plan to run Javascript code

Squarespace Date format (affiliate link) - non affiliate link

Free - Easy - Quick - various format for you to implement the date format in your entire site

image.thumb.png.f3e6248eaaadfa1d66d0dcf5957a939f.png

Here is the result I try on my demo site

image.thumb.png.b0d34ebc4c51c422186c599f1774f77c.png

Edited by HoaLT

Press 👍  or mark my comment as solution if you find my sharing useful

🆒 Squarespace pinchzoom lightbox plugin (affiliate link)

👁‍🗨 360 degree photo viewer (affiliate link)

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.