pタグの文章が表示されない問題を解決したい。

Question

前提・実現したいこと

書籍を参考にHTMLとCSSでサイトのページを作っています。
page-titleクラスのMenuの下に説明文を表示させたく、pタグを記述したのですが文章が表示されません。
chromeのデベロッパーツールで見てみるとpタグの中の#textのサイズが95*2となっています。

html

<div class="menu-content wrapper"> <h2 class="page-title">Menu</h2> <p> 体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 </p> </div>

css
menu {
background-image: url(../images/menu-bg.jpg)
}

.menu-content {
max-width:560px;
margin-top: 10%;
}
.menu-content .page-title {
text-align: center;
}
.menu-content p {
font-size:1.125px;
margin:10px 0 0 ;
height:100px;
}

試したこと

css上でpタグに高さ、幅を指定したところp要素には適用されましたが、中身のテキストは変わりませんでした。

Answer 1

font-size:1.125px;

これですね
1pxじゃ見えないのも当然です。12pxとかにしてみてください。

Comments

[Aokisenpai]

回答ありがとうございます！
1.125remを誤ってpxで記述しておりました。

Answer 2

1.125px は2px以下の小さいサイズです。11.25pxくらいにしてみてください。（もしくは1.125em）

Comments

[Aokisenpai]

迅速な回答ありがとうございます！
書籍に1.125rem と記述されていたものを書き違えておりました。