使文本行响应

Question

我的网站上有以下部分。问题是文本行没有响应。

我怎样才能把它变成响应式文本？

以下是它在 22" 屏幕上的显示方式：

以下是它在 13" 屏幕上的显示方式：

以下是它在 5,2" 手机屏幕上的显示方式：

https://jsfiddle.net/hd99bfyd/

<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px;
            background-image: url("images/airc1.jpg");

        }

Answer 1

添加一个line-height设置，例如 120%：

.wrapper.style5 {
            background-color: #D22362;
            color: #fff;
            border-top: 0;
            text-align: center;
            font-size: 50px;
            line-height: 120%;
            background-image: url("images/airc1.jpg");

        }

<section id="three" class="wrapper style5">
                <div class="inner">
                <p>Do You Want To Join Our Team?</p>
                </div>
            </section>