Capitalise first letters of blog posts

Hi there,

What about this?

.inside-article p:first-of-type:first-letter {
    text-transform: uppercase;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know :)

Hmm...not quite: I am trying to replicate something more along the lines of the Drop Cap first letter
https://www.wpbeginner.com/plugins/how-to-add-drop-caps-in-wordpress-posts/

The plugin they refer to is not in use any more

Try this:

.inside-article p:first-of-type:first-letter {
    float: left;
    font-size: 75px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
}

Reference: https://css-tricks.com/snippets/css/drop-caps/

Wonderful - thank you for such clear and quick support!

No problem :)

Hello again,

I have noticed a small issue with this - when applied it also adds the Drop Cap to the Blockquotes - this really skews their appearance.
I have applied the following code to make it fit - but if I make any changes to the Blockquote style (or change to pull quote, then it does not work - :
.wp-block-quote p:first-of-type:first-letter{
float: none;
font-size: 20px;
line-height: 65px;
padding-top: 0px;
padding-right: 1px;
padding-left: 0px;
}
How can I exclude blockquotes from the Drop Cap?
Many thanks

Hi there,

thats odd - can you link me to a post with the code in place so as the issue with the blockquote can be seen.

Hi David - I found a way around it and am using a Gutenberg add-on to apply a different and more stylised blockquote - this does not seem to suffer the same problem.

I have though, run into issues with the way the drop cap shopws on different screens.
My wife uses a MAC and the dop cap appears with spacing issues - it does not fit correctly on the lines.

Here is the link to the page itself - https://artemes.global/blog/
On my ASUS desktop it looks fine - takes up two regular lines and fits nicely.

Is there a different class needed to apply the code for mac users?
We have tried clearing caches and using diffeent browsers, but the same result occurs.

Yeah common issue that the two OSes render fonts differently. Try this method which uses EM sizes for the font.

.inside-article p:first-of-type:first-letter {
    float: left;
    font-size: 6em;
    line-height: .78;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal
}

This works great on blog posts, but the problem is that it also capitalizes paragraphs on my homepage and other pages too. Is there a way to make this apply *only* to blog posts?

Hi there,

change it to this:

.single-post .inside-article p:first-of-type:first-letter {
    float: left;
    font-size: 6em;
    line-height: .78;
    margin: .05em .1em 0 0;
    text-transform: uppercase;
    font-style: normal
}