title: Overlapping Text in CSS - How do I change it?
body: <p>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. </p>
  
  <p>This change is for the mobile version of the site (the @media section for landscape tablets)</p>
  
  <p>Currently, the header (<code>h2</code>) text is overlapping on an iPad/tablet.</p>
  
  <p>Code from the h2 <code>@media</code> section:</p>
  
  <pre><code>.da-slide h2{
      font-size: 36px;
      width: 80%;
      top: 40px;
      padding: 18px 20px 18px 20px;
  </code></pre>
  
  <p>(The <code>.da-slide h2</code> is the component that holds this text in the html)</p>
  
  <p>I tried the <code>line-height</code> property but it didn't work?</p>
  
  <p>Any ideas...</p>