H1标签无反应

Question

I have the H1 tag set but its not responsive. I have the code as follows which I thought should work but obviously not.

<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

The below should be responsive. You were using a very big font-size and hence it was not breaking the word. The code below will break the word but in order to make the font-size responsive, you will have to use media queries at your breakpoints.

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%;
}