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

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:

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!

Can you share your website URL?

Of course @Ziggy  🙏

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.

Thank you very much @Ziggy. I didnt work. Do I maybe need to add the "!important"?

1 minute ago, Mola said:

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

That's always worth a try!

Now It worked for the 1. case (the link below articles) which is great. Thank you! 

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

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

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

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?

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. 

5 minutes ago, Mola said:

Of course. Here we go. 

Try this:

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

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 😉 

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?

Good Morning @Ziggy, of course. Here is the link (its online again)

Thank you so much

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.

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. 

3 hours ago, Mola said:

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

Or should I change something else @Ziggy? 🙏

that worked! Thank you so much @Ziggy!