Overlapping Text in CSS - How do I change it?

Question

I'm trying to change an overlapping element (text) in my css file. One line of texts (in a regular browser) appears as two lines of text in mobile, overlapped together.

This change is for the mobile version of the site (the @media section for landscape tablets)

Currently, the header (h2) text is overlapping on an iPad/tablet.

Code from the h2 @media section:

.da-slide h2{
    font-size: 36px;
    width: 80%;
    top: 40px;
    padding: 18px 20px 18px 20px;

(The .da-slide h2 is the component that holds this text in the html)

I tried the line-height property but it didn't work?

Any ideas...

Answer 1

Are you sure that the line-height css property has been apply to your class?

CSS

    .da-slide h2{
        font-size: 36px;
        line-height: 36px;
        width: 80%;
        top: 40px;
        padding: 18px 20px 18px 20px;
    }

Otherwise, have you added the meta tag in the header?

<meta name="viewport" content="width=device-width, initial-scale=1">

Also, for responsive website, be sure that the text isn't ajusted:

CSS

body { -webkit-text-size-adjust: none; }