How Do I Format Wordpress To Make The First Letter Big On My Blog

September 19, 2019 at 4:59 pm #1014041

John

Hi there,

Does anyone have any suggestions for capitalising the first letters of blog posts?
I have seen some different CSS around the web for it, but nothing quite gives a completely happy finish.
Many thansk!
JOhn

September 19, 2019 at 5:13 pm #1014051

Leo

Staff

Customer Support

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 🙂

September 19, 2019 at 6:54 pm #1014086

John

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

September 19, 2019 at 7:59 pm #1014107

Leo

Staff

Customer Support

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/

September 19, 2019 at 10:02 pm #1014145

John

Wonderful – thank you for such clear and quick support!

September 20, 2019 at 8:48 am #1014604

Leo

Staff

Customer Support

September 22, 2019 at 2:08 am #1015717

John

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

September 22, 2019 at 4:07 am #1015750

David

Staff

Customer Support

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.

September 23, 2019 at 3:04 am #1016427

John

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.

Drop Cap Issues
More Drop Cap Issues on MAC

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.

September 23, 2019 at 4:01 am #1016464

David

Staff

Customer Support

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 }