Jump to content

Styling of basic blog grid

Go to solution Solved by DPruitt,

Recommended Posts

Hey,

I would like the styling of my basic blog grid to mirror that of the blog summary block on the home page.

Home page summary block: https://heardstudio.co.uk/ (scroll to 'stories we've told so far')
Basic blog grid page: https://heardstudio.co.uk/recent-work

Currently I use this css for the summary block:
 

.summary-title-link {
    font-family: Helvetica Neue;
    font-size: 2rem;
  	text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0rem !important;
  margin-bottom: 0.8em;
  margin-top: 0.8em !important;
}
.summary-excerpt p {
  font-size: 1rem !important;
}
.sqs-block-summary-v2 .summary-item-record-type-text .summary-read-more-link {
	font-family: 'aktiv-grotesk-extended' !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	font-style: normal !important;
	text-transform: uppercase !important;
}

.sqs-block-summary-v2 .summary-block-setting-text-size-large .summary-title {
	padding-bottom: 0.5rem !important;
	padding-top: 0.5rem !important;
}
.sqs-block-summary-v2 .summary-excerpt {
   padding-bottom: 0.8rem !important;
}

 

What do I need to target to get this to also apply to the basic blog grid page?

Also I have got unique styling for the h3 and h4 fonts, but this does not seem to be applying on the basic blog grid page?
 

h3, h4 {
text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0rem !important;
  margin-bottom: 0.8em;
}

 

Any help appreciated 😊

Link to comment
  • Solution

Try this:

 

 

Blog Title:

 

.blog-title
{    font-family: Helvetica Neue !important;
    font-size: 2rem !important;
  	text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0rem !important;
  margin-bottom: 0.8em;
  margin-top: 0.8em !important;
	padding-bottom: 0.5rem !important;
	padding-top: 0.5rem !important;}

 

Blog Excerpt:

.blog-excerpt p
{font-size: 1rem !important;}

.blog-excerpt
{padding-bottom: 0.8rem !important;}

 

Read More Link:

.blog-more-link
{	font-family: 'aktiv-grotesk-extended' !important;
	font-weight: 500 !important;
	font-size: 1rem !important;
	font-style: normal !important;
  text-transform: uppercase !important;}

 

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.