Fonts cut off at the bottom in widget's titles

[bozomax]

Hi!

I have a problem the display of widgets’ titles. Essentially in Chrome and Edge is ‘shaves off’ the bottom of any title text. For example in this header the lower bit of letter ‘p’ will be shaved off:
<h3 class="spb-heading spb-text-heading"><span>Get FREE tips!</span></h3>
which you can see here or on any page there. Changing ‘H3 Font Line Height’ in the theme settings doesn’t help, while reducing the font size does help, however I don’t want to do that for aesthetic reasons.

This seems to be caused by /dante/style.css:2963 where

h4.spb-heading, h3.spb-heading, h4.lined-heading{
...
line-height: 0!important; 
...

Removing this, obviously breaks alignment. Changing

h3.spb-heading {
    margin-bottom: 25px;
}

also doesn’t help.

Any help or updates would be much appreciated!

Thanks

Max

[Mohammad – SUPPORT]

Hi,
Everything looks perfect to me. Please attach marked screenshot to indicate the issue.
Thanks
Mohammad

[bozomax]

Hi!

That is good on the one hand, since you did not notice, or everything works fine in your browser. 🙂

So, here are the attachments. sc-1 and sc-2 are from my PC, running Win 10 and Chrome 47.0.2526.111 m. sc-3 and 4 are from iPhone 5c’s Safari, with iOS 9.2. I have underlined with red lines places where bottom bits of certain letters are cut off.

The font used is a Google Font — Playfair Display 700. <h3> size is set to 22px, as I mentioned before changing h3 lineheight in the theme’s settings has no effect. The same thing happens with any font I use, this is clearly an issue with font size, rather than font itself. If I set <h3> size to, for example, 16px everything fits nicely, but I would like to use larger sizes.

Also, this may be a separate question. Is there a way to have different font sizes for different devices? One size for desktops and the other, smaller, for mobile devices.

Thanks,

Max

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Just provide me specific page url to check and resolve fast.
Thanks
Mohammad

[bozomax]

Hi!

Sure. Check here http://www.ocoach-fitness.co.uk/packages-prices/ Look for widget headers: ‘Get FREE tips’, ‘Online Coaching’, ‘Available Packages and Prices’

Max

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.spb-heading{
line-height:15px !important;
}

Thanks
Mohammad

[bozomax]

Hi!

Thanks! In the end it has worked only when explicitly setting line height of h3:

h3.spb-heading{
line-height:10px !important;
}

However I still got a question about how to resize the font size for mobile devices. In custom CSS bit I have added this:

@media handheld {
h3.spb-heading{
font-size:16px;
}
}

but that has no effect on the font size on mobile… Any suggestions would be much appreciated!

Thanks!

Max

[Mohammad – SUPPORT]

Hi,
Please use this code for mobile device :-

@media screen and (max-width: 767px) {

h3.spb-heading{
font-size:16px;
}

}

Thanks
Mohammad

[bozomax]

That’s great! This has worked, thank you!

[bozomax]

So the problem is resolved.

[Kyle – SUPPORT]

Great, thanks Mohammad!