htmlcssmarginline-height

Different space to top on mobile devices - How to fix?

I want certain words to be highlighted with a background color on headings. So I am using in my headings like

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

In CSS I have added:

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

On mobile devices I have the problem, that the text is not centered. I have less background visible to the top. When I check the site with any browser from normal desktop its looking fine but at the point I am viewing the page with mobile devices its wrong.

Here is how it look like:

Problem

enter image description here

Here is the link to page

Can somebody help me out with this? kweb

Solution

  • A quick fix would be to adjust the padding.

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

    And on the number counters:

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