将浏览器缩小到 iPhone 大小时，如何让英雄文本自行调整大小？

当我缩小浏览器的大小时，我的英雄文本无法正确调整大小。像这样：

我在这里尝试了 SO 帖子的建议：当用户减小浏览器的大小时，如何使文本换行到下一行？

但这对我不起作用。这是我关于英雄部分的 style.css 文件部分：

/* === HERO === */

#hero
{
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed;
    min-height: 500px;
    padding: 40px 0;
    color: white;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.col-sm-7 {
    text-align: center;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 20%;
    margin-top: -150px;
}

这是 content-hero.php 文件：

<!-- HERO
==========================================================================  -->
<section id="hero" data-type="background" data-speed="5">
   <article>
      <div class="container clearfix">
         <div class="row">
            <div class="col-sm-7 hero-text">
              <h1><?php bloginfo('name'); ?></h1> 
              <p class="lead"><?php bloginfo('description'); ?></p>
            </div>
         </div>
      </div><!-- container -->
   </article>
</section><!-- hero -->

我尝试过使用 col-sm-7 和 word-wrap:normal 类，也尝试过使用 .col-sm-7.hero-text { word-wrap:normal} 类，但都没有为我工作。

我确实为平板电脑大小尝试过这个：

@media screen and (max-width: 991px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        position: relative;
        background: none;
    }
}

它起作用了，但是对于 iphone 大小，尽管有这个，字母仍然被切断：

@media screen and (max-width: 568px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        position: relative;
        background: none;
      }
}

是不是 568px 大小不合适？为什么它不适用于智能手机尺寸？

然后我决定按照下面的建议将 .hero-text 保留在布局流程中，我开发了这个：

#hero
{
    background: url("/wp-content/themes/threegreenbirds-daniel/images/grass-ground-new.jpg") 50% 0 repeat fixed;
    min-height: 500px;
    padding: 40px 0;
    color: white;
    position: relative;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.container-clearfix {
    position: relative;
}

.col-sm-7 {
    text-align: center;
}

.hero-text {
    top: 50%;
    left: 20%;
    margin-top: 90px;
}

/* === MEDIA QUERIES === */

@media screen and (max-width: 991px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        margin-left: 100px;
        position: relative;
        background: none;
    }
}

@media screen and (max-width: 600px) {
    .logged-in .navbar-fixed-top {
        top: 42px;
    }
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        margin-left: 100px;
        position: relative;
        background: none;
    }
}

@media screen and (max-width: 568px) {
    .hero-text {
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        margin-top: 130px;
        position: relative;
        background: none;
      }
}

但是当我将屏幕尺寸减小到 991 像素以下时，我上面的内容不起作用。