Site and post titles change size when made links

Hi @anjiaoshi

When I make my site and post titles into links, the type shrinks

I’m not sure I am following exactly what you mean, which block are you using as the Post title?

The post title block doesn’t have the option to add a links at the moment, are you using a different block? Please feel free to add screenshots of the block you are using

I’m talking about the Post Title block in the Query Loop. If you click the link I provided, you’ll see exactly what I mean. The post titles should all be in H1, but they’re shrunk down to H4.

Hi @anjiaoshi

Thank you for providing more information, I checked the post title blocks and they’re H1 as shown in the screenshot below.

However, I understand that you might want the post title to have a different font size the best way to do this would be to change the block’s font size. The article below has more information about adjusting the font settings:

https://www.ads-software.com/support/article/typography-settings-overview/

• This reply was modified 1 year, 10 months ago by thelmachido a11n.

Yes, I know. That’s my point. They’re coded as H1, but they’re displaying as H4. If I switch off the “Make title a link” toggle, they pop up to H1 size. When I switch it back on, they shrink to H4 size again. The same goes for my Site Title block: If I switch on “Make title link to home,” which I’d like to do, the title shrinks down from Huge (which I want it to be) to normal text size. If I switch it off, it reverts to Huge.

I want both these elements to be links, but I also want them to display at the proper size, and I don’t understand why the block theme won’t allow them to do that.

Hi @anjiaoshi – thanks for clarifying the problem.

While I can see where it’s coming from on your site, I haven’t yet been able to replicate this on a test site.

If you’d like to troubleshoot further, could you please clarify:

• which template are you using on the front page, is it Home?
• have you added custom CSS anywhere?
• have you edited the theme files in any way?

If you prefer just to add some CSS to fix the visual disparity without doing more troubleshooting, this should do the trick to return your post titles to the default (larger) post title size:

.wp-block-post-title a:where(:not(.wp-element-button)) {
  font-size: inherit;
}

You can access the CSS editor by adding this after your URL /wp-admin/customize.php and visiting the Additional CSS panel.

And instead of adding custom CSS you could instead try modifying the Post Title font size, as Thelma suggested earlier. Since I can’t replicate the issue yet, I’m not able to test whether this will work to override the smaller size, but you’re welcome to give it a try on your end.

Yes, I’m using Home on the front page, I haven’t added custom CSS (I don’t know how), and I haven’t edited any of the theme files.

Modifying the Post Title font size didn’t help. Different baseline, but same issue.

I’ll try your trick and see whether it works.

So the CSS snippet worked on the Post Title, but it didn’t work on the Site Title. With that, I’m experiencing the same issue as before. Is it because the Site Title is in the header, maybe?

ETA: Oddly, in the theme editor, it looks like it didn’t work on the Post Title, either. But the site itself, when I load it, displays properly.

• This reply was modified 1 year, 10 months ago by anjiaoshi.

Is it because the Site Title is in the header, maybe?

The code provided previously will only work for post titles, I checked your site and it looks like you have set the Site Title block to use a huge font.

Can you please try setting a custom font for the Site Title block in the editor. You can do this by following the steps in the short video below:

https://d.pr/v/JlsNUQ

Let me know if that helps adjust the font size for the Site Title.

It’s actually already set to Huge in the block editor in exactly the way you suggest. Doesn’t matter. As soon as I click on “Make title link to home,” the Site Title shrinks to text size. When I unclick it, it pops back up to Huge.

As soon as I click on “Make title link to home,” the Site Title shrinks to text size. When I unclick it, it pops back up to Huge.

Yes, it does look like you have set it to huge which means it inherits the font size for the huge class.

You can use the CSS code below to change the font size for your Site Title, you can adjust your number to your liking

.wp-block-site-title a:where(:not(.wp-element-button)) {
    font-size: 60px;
}

So this is interesting: In the theme editor, it doesn’t appear to have changed anything. On the actual site, however, the Site Title now displays at the appropriate size even when set to work as a link.

However, it also displays an unattractively thick underline when I mouse over the link. Is there any way to make the Site Title an exception to normal link highlighting rules?

That is because the theme editor is still showing the CSS that comes with the theme but the front-end of the site is loading the CSS you have added to the customizer, it’s not unusual.

Is there any way to make the Site Title an exception to normal link highlighting rules?

You can use the CSS code below to remove the underline from the Site Title.

.wp-block-site-title a:where(:not(.wp-element-button)):hover {
    text-decoration: none;
}

Desired result finally achieved! Thank you very much!

I am glad that it gave you the desired results, that you for the update