Having trouble with drop caps

Themes
1

Hi everyone,

I’ve been trying to implement drop caps on all of my posts on my website https://www.mobtownmag.com/. However, whenever I use the following code, which I found on this forum, the drop caps only work on my featured posts. I’m not sure if it’s my theme or what, but I didn’t have this problem with other themes. Is there any way to possible alter the following code to override any settings that may be preventing the drop caps from showing on non-featured posts? I’d appreciate the help. Thanks!

<style>
.post p:first-child:first-letter {
  color: #900;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}
</style>
2

Hmm… looking at your site the wrapper is div.post-content - and you want to target the first paragraph. Try…

.post-content p:first-child:first-letter {

and see what happens.

Also, really cool CSS fades in the header

3

Thanks! And unfortunately, the drop caps still only show for the top featured post.

4

can you paste a link to a post with dropcap pls

5

Here you go: Baltimore's fatal overdose rate shows signs of slowing, prompting cautious optimism

6

Does this play…

.post .post-content > p:first-of-type::first-letter {
    float: left;
    margin-top: 10px;
    margin-right: 10px;
    color: red;
    font-size: 70px;
    line-height: 60px;
}
7

Indeed it does! Thanks so much.

1 Like
8

Weird. Not working for me on either of my Ghost sites for some reason. One runs on Braun and the other on Solo.