Jump to content

Adjusting Mobile Font Size for Related Blog Post Titles and Blog Overview Page in Squarespace CSS

Go to solution Solved by Ziggy,

Recommended Posts

Hello everyone,

I need some assistance with customizing my Squarespace website using CSS. Specifically, I'm trying to adjust the font size of related blog post titles at the bottom of each blog post on mobile devices. Here's what I need help with:

  1. I want to reduce the font size of the titles for related blog posts on mobile devices, as they currently appear too large. Can anyone please help me identify the correct CSS selector name for this area (for example, ".blog-item-wrapper .blog-item-title h1.entry-title") so that I can customize it with the appropriate code?

  2. I have successfully resized the mobile headers on my blog post pages using the following code:

.blog-item-wrapper .blog-item-title h1.entry-title {
    font-size: 20px !important;
}

!important; }

Now, I would like to apply a similar change to the blog overview page. However, I'm not sure what the correct CSS selector name is for this area. Can anyone please help me identify the correct CSS selector for the blog overview page?

Any guidance or advice on this would be greatly appreciated. Thank you in advance for your help!

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try adding this to your Custom CSS:

// Blog Pagination title - Desktop
@media only screen and (min-width:768px) {
  .item-pagination-title {
     font-size: 2rem;
  }
}
// Blog Pagination title - Mobile
@media only screen and (max-width:767px) {
  .item-pagination-title {
     font-size: 1rem;
  }
}

Adjust the desktop and mobile values to suit your design.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, Mola said:

Do I maybe need to add the "!important"?

That's always worth a try!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

This CSS is also good for mobile pagination (stacks up the pagination so the text is more legible):

@media only screen and (max-width:767px) {
  .item-pagination-link {
     max-width: 100% !important;
  }
  .item-pagination {
     display: flex !important;
     flex-direction: column !important;
  }
  .item-pagination-link--prev {
     padding-bottom:12px;
  }
}

 

5 minutes ago, Mola said:

But the headline on the blog overview page on mobile is still too large. Any idea what else I can try? 

Try this:

@media only screen and (max-width:767px) {
  .blog-title h1 {
    font-size:2vw !important:
  }
}

 

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

mhm. tried it, but it doesn't work. Any other idea? 🙂

And I'd like to get rid of the space between the blog post graphic and the blog post headline (which currently won't go away on mobile). If you also have an idea here I would be insanely grateful to you. 🙏

Link to comment
1 minute ago, Mola said:

mhm. tried it, but it doesn't work

How strange, this is code I've used many times successfully, I wonder if you might have some conflicting CSS or code injection? I might have to get into the website backend to test what works and what doesn't.

3 minutes ago, Mola said:

And I'd like to get rid of the space between the blog post graphic and the blog post headline (which currently won't go away on mobile).

I can't see this space, can you share a screenshot?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
19 hours ago, Ziggy said:

How strange, this is code I've used many times successfully, I wonder if you might have some conflicting CSS or code injection? I might have to get into the website backend to test what works and what doesn't.

Should I send you the other CSS as PM or do you have another idea I can try?

19 hours ago, Ziggy said:

I can't see this space, can you share a screenshot?

Of course. Here we go. 

 

Edited by Mola
Link to comment
5 minutes ago, Mola said:

Of course. Here we go. 

Try this:

.blog-basic-grid .blog-article-spacer {
    height: 6px important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
34 minutes ago, Ziggy said:
.blog-basic-grid .blog-article-spacer {
    height: 6px important;
}

That works, thank you! 🙏

So last thing would be the Header size on the mobile blog overview page. If you have any idea, I would be more than thankful.

While waiting there is some coffee on your way 😉 

Link to comment
1 hour ago, Mola said:

So last thing would be the Header size on the mobile blog overview page. If you have any idea, I would be more than thankful.

I should have a few minutes to look at this tomorrow morning, but the page you shared no longer works, can you check and re-share?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

I think that the reason the code I gave you previously was not working is that you have this conflicting code with !important which overrides it:

@media only screen and (max-width: 640px) {
  h1 {
    font-size: 2rem !important;
  }
}

You will have to remove the important from this, and re-try this:

@media only screen and (max-width:767px) {
  .blog-title h1 {
    font-size:2vw:
  }
}

Let me know how that goes.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, Ziggy said:

I think that the reason the code I gave you previously was not working is that you have this conflicting code with !important which overrides it:

@media only screen and (max-width: 640px) {
  h1 {
    font-size: 2rem !important;
  }
}

I`m not sure which one you mean? I tried to take out all "!important", but it didn't change anything. 

Link to comment
  • Solution

Not sure, you can try this tweak to the code:

@media only screen and (max-width:767px) {
  .blog-title {
    font-size:1.25vw !important:
  }
}

But I'm shooting in the dark to some extent here, in that I can't see the effect (or lack of).

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.