Text appears cut off on top

Question

Im having an issue and i have no clue how it happened. It was good one day and in the other my text, just in that column appears cut off on top.

this is the website, and the problem is on the right column in the titles: http://vipvan.pt/tours/culturevan/tour-sintra-um-dia?lang=en!

Answer 1

It's definitely an issue with your line-height. Perhaps at one point or another you modified it? The current value is 0.9 for your global h2 declaration.

h2 {
font-family: "Josefin Slab";
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 0.9;
text-decoration: none;
text-transform: none;
}

Change line-height from 0.9 to 1 and the problem is fixed.

Answer 2

Looking at your css through Firebug shows me that you have a line-height of 0.9

h2 {
font-family: "Josefin Slab";
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 0.9;
text-decoration: none;
text-transform: none;
}

So I suppose your h2 simply doesn't have enough space. Try to set the line-height to at least font size – so in this case 22px (1.0) or more.

PS: actually I would recommend using "rem" instead. See also "Calculate line-height with font in rem-value".