Gutenberg CSS Issue

Question

I have the css code below but it does not work on the post page:

( I am talking about font size and color )

/* gutenberg */
blockquote {
    text-align: center;
    margin: 20px;
    font-family: epicride;
    color: red;
    font-size: 90px;
}

wp-block-quote {
    font-size: 90px;
}

This is a page where it works:

http://www.oneclick.deniz-tasarim.site/sample-page/

This one is post where it does not work:

http://www.oneclick.deniz-tasarim.site/2020/03/27/best-places-in-africa/

I have the css code below but font-family is not read.

@import url('https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister&display=swap');

  figcaption {
    font-size: 30px;
    text-align: center;
    font-family: 'Love Ya Like A Sister', cursive;
      border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
      box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
      border:solid 2px #41403E;
}
figcaption:hover {
    box-shadow: 2px 8px 4px -6px hsla(0, 0%, 0%, .3);
}

you can look at the same post page to check it out.

Also figcaption code affect my post plugin on homepage. How can I limit the code's control area with gutenberg element?

The home page: ( you will see black border on thumbnail )

http://www.oneclick.deniz-tasarim.site/

Thanks

Answer 1

Your blockquote has a <p> tag in it that overwrites the font-size attribute. Either delete the <p> tag or add css for bolckquote p or/and .wp-block-quote p