html - 移动设备顶部的不同空间 - 如何修复？

Question

我希望某些单词在标题上以背景颜色突出显示。所以我在我的标题中使用

<h2 class="sppb-title-heading">Ihre <span>Vorteile</span> bei uns</h2>

在 CSS 中，我添加了：

h2.sppb-title-heading span{
   background: #edbd4f;
   color: #4e7cb7 !important;
   padding: 0 5px !important;
   line-height: 100% !important;
}

在移动设备上，我遇到的问题是文本没有居中。顶部可见的背景较少。当我使用普通桌面上的任何浏览器检查该网站时，它看起来不错，但此时我正在使用移动设备查看该页面，但它是错误的。

这是它的样子：

问题

这是页面的链接

有人可以帮我解决这个问题吗？网络

Answer 1

一个快速的解决方法是调整填充。

h2.sppb-title-heading span{
   background: #edbd4f;
   color: #4e7cb7 !important;
   padding: 5px 5px 0 !important;
   line-height: 100% !important;
}

在数字计数器上：

#counter .sppb-animated-number{
        font-family: 'LithosPro-Regular';
        font-size: 65px;
        color: #fff;
        line-height: 100% !important;
        padding: 10px 5px 0;
}