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

【问题标题】：Different space to top on mobile devices - How to fix?移动设备顶部的不同空间 - 如何修复？
【发布时间】：2021-05-31 00:18:51
【问题描述】：

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

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

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

这是它的样子：

问题

这里是link to page

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

【问题讨论】：

只需更改填充：15px；对于类“#counter .sppb-animated-number”

标签： html css margin line-height

【解决方案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;
}

【讨论】：