css - 使文本行响应

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>