How to prevent line overlapping and make media query work for large screens

How to prevent line overlapping and make media query work for large screens

HTML

<p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent;"><span style="font-size: 13.5pt; font-family: &quot;Verdana&quot;,&quot;sans-serif&quot;;"><code style="background-color: cyan;"><b>Diagnosis and Tests for Addison&#39;s disease:-</b></code></span></p>
<p style="font-family: &quot;verdana&quot;; font-size: 18px; color: black; line-height: 18px; text-align: justify; font-style: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; background-color: transparent;"><span style="font-size: 13.5pt; font-family: &quot;Verdana&quot;,&quot;sans-serif&quot;;"><code><b>Please E-mail us for any questions with respect to the above.</b></code></span></p>

CSS

  font-family: "verdana";
  font-size: 18px;
  color: black;
  inline-height: 18px;
  font-weight: bold !important;
  }
@media only screen and (min-width: 768px) {
  font: 18px "verdana"; !important;
  }
}

Using this CSS finally solved it

code {
  font-family: "verdana";
  font-size: 18px;
  color: black;
  font-weight: bold !important;
  line-height: 1.5 !important;
  }
@media (max-width: 480px) {
code {
  font: 18px "verdana" !important;
  }
}
@media (min-width: 481px) and (max-width: 767px) {
code {
  font: 18px "verdana" !important;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
code {
  font: 18px "verdana" !important;
  }
}
@media (min-width: 1025px) and (max-width: 1280px) {
code {
  font: 18px "verdana" !important;
  }
}
@media (min-width: 1281px) {
code {
  font: 18px "verdana" !important;
  }
}

Please read the comments below also