Blog title font size nightmare

Site URL: https://www.donturbanisethedowns.com/blog

Hi folks

I've seen a lot of questions about this but still can't solve. On our main blog page, the titles for individual posts are huge - https://www.donturbanisethedowns.com/blog. I've tried custom css copying other suggested code but still not working. The titles on individual posts once you click the links are fine. Please help!

On 6/6/2021 at 5:22 PM, madharper said:

Site URL: https://www.donturbanisethedowns.com/blog

Hi folks

I've seen a lot of questions about this but still can't solve. On our main blog page, the titles for individual posts are huge - https://www.donturbanisethedowns.com/blog. I've tried custom css copying other suggested code but still not working. The titles on individual posts once you click the links are fine. Please help!

I think you can change it in Design > Site Styles?

If you can't find it, add this to Design > Custom CSS

/* blog title */
h1.blog-title a {
    font-size: 1.5rem;
}

Hi. That really helped! But I now have weird line-spacing. Any idea on how to fix that. I tried  line-height: 16pt; but it hasn't worked. See https://www.donturbanisethedowns.com/blog. Much appreciate help so far!

22 minutes ago, madharper said:

Hi. That really helped! But I now have weird line-spacing. Any idea on how to fix that. I tried  line-height: 16pt; but it hasn't worked. See https://www.donturbanisethedowns.com/blog. Much appreciate help so far!

 

Try:

.blog-title {
	line-height: 85% !important;
}

Hi aravsanj

I tried that. Hasnt worked. https://www.donturbanisethedowns.com/blog

CSS is now:

/* blog title */
h1.blog-title a {
    font-size: 1.5rem;
 line-height: 85% !important;

}

I have actually tried every single kind of line-height - %, rem, px - nothing seems to work. I have also tried changing under site styles. That had no effect whatsoever!

20 minutes ago, madharper said:

Hi aravsanj

I tried that. Hasnt worked. https://www.donturbanisethedowns.com/blog

 

CSS is now:

 

/* blog title */
h1.blog-title a {
    font-size: 1.5rem;
 line-height: 85% !important;

}

This is the code:

.blog-title {
	line-height: 85% !important;
}

Don't target anchor (a) element.

Hi. That fixed line height but took me back to huge font! Code is now:

.blog-title {
    font-size: 1.5rem;
   line-height: 85% !important;

}

It seems I can either fix the line height OR the font size, but not both!

3 minutes ago, madharper said:

Hi. That fixed line height but took me back to huge font! Code is now:

.blog-title {
    font-size: 1.5rem;
   line-height: 85% !important;

}

It seems I can either fix the line height OR the font size, but not both!

Try using them separately:

h1.blog-title a {
    font-size: 1.5rem;
}

h1.blog-title {
	line-height: 85% !important;
}

OMG Aravsanj - you've done it!!!!!!!! It's been driving me NUTS but code now works. Thank you, thank you!

1 minute ago, madharper said:

OMG Aravsanj - you've done it!!!!!!!! It's been driving me NUTS but code now works. Thank you, thank you!

My pleasure! I should have been clear to use the code separately. We were targeting two separate entities.  The white-space happens because of class blog-title's  pre-formatting. Not the text in anchor link. Anyways, good luck 🙂

Thank you! Have a new issue now. Will post as separate question!

On 6/10/2021 at 4:35 PM, madharper said:

Thank you! Have a new issue now. Will post as separate question!

 

Do you need fix these?

Site URL – https://www.donturbanisethedowns.com/

1. (Tablet-Footer) Make 5 icons same line?

2. (Mobile-Footer) Align left or center icons?