H1タグが応答しない

Question

H1タグは設定されていますが、応答しません。私は次のようなコードを持っていますが、明らかにうまくいくはずです。

<div class="middle"> 
     <h1>Cheryl Cox Counselling</h1></div> 



body { 
font-size: 100%; 
} 


.middle { 
display: flex; 
width: 55%; 
justify-content: center; 
} 




h1 { 
font-family: 'Great Vibes', cursive; 
font-size: 7em; 
padding-top: .5em; 
color: grey; 
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px 
rgba(0, 0, 0, 0.8); 
} 

Answer 1

以下のように応答する必要があります。あなたは非常に大きなフォントサイズを使用していたので、それは単語を壊すことはなかった。以下のコードは単語を分断しますが、フォントサイズを反応させるためには、ブレークポイントでメディアクエリを使用する必要があります。あなたが期待する何

https://jsfiddle.net/71dfq220/2/

<div class="middle"> 
    <h1>Cheryl Cox Counselling</h1> 
</div> 


body { 
font-size: 100%; 
} 


.middle{ 
    width:100%; 
    position:relative; 
} 

h1 { 
font-family: 'Great Vibes', cursive; 
font-size: 5em; 
white-space:normal; 
word-break: break-all; 
color: grey; 
text-shadow: -1px -1px 0px rgba(255, 255, 255, 0.3), 1px 1px 0px 
rgba(0, 0, 0, 0.8); 
text-align:center; 
width:100%; 
}