html text not responsive
http://mediacomp-wp.mapacheranch.com/glossary1/
The clickable alphabet at the top of the page is not responsive, but the container is.
I have a column shortcode with this html inside it:
<p class="big">[dropcap background="" color="" circle="0" size="2"]C[/dropcap]
<h5 align="center">Click on the appropriate letter below</h5>
<div></div>
<div align="center"><span style="font-size: 15pt;"><a href="/glossary1/">A</a> <a href="../b">B</a> <a href="../c">C</a> <a href="../d">D</a> <a href="../e">E</a> <a href="../f">F</a> <a href="../g">G</a> <a href="../h">H</a> <a href="../i">I</a> <a href="../j">J</a> <a href="../k4">K</a> <a href="../l">L</a> <a href="../m">M</a> <a href="../n">N</a> <a href="../o">O</a> <a href="../p">P</a> <a href="../q">Q</a> <a href="../r">R</a> <a href="../s">S</a> <a href="../t">T</a> <a href="../u">U</a> <a href="../v">V</a> <a href="../w">W</a> <a href="../x">X</a> <a href="../y">Y</a> <a href="../z">Z</a></span></div>
<div>
The clickable alphabet at the top of the page is not responsive, but the container is.
I have a column shortcode with this html inside it:
<p class="big">[dropcap background="" color="" circle="0" size="2"]C[/dropcap]
<h5 align="center">Click on the appropriate letter below</h5>
<div></div>
<div align="center"><span style="font-size: 15pt;"><a href="/glossary1/">A</a> <a href="../b">B</a> <a href="../c">C</a> <a href="../d">D</a> <a href="../e">E</a> <a href="../f">F</a> <a href="../g">G</a> <a href="../h">H</a> <a href="../i">I</a> <a href="../j">J</a> <a href="../k4">K</a> <a href="../l">L</a> <a href="../m">M</a> <a href="../n">N</a> <a href="../o">O</a> <a href="../p">P</a> <a href="../q">Q</a> <a href="../r">R</a> <a href="../s">S</a> <a href="../t">T</a> <a href="../u">U</a> <a href="../v">V</a> <a href="../w">W</a> <a href="../x">X</a> <a href="../y">Y</a> <a href="../z">Z</a></span></div>
<div>
Comments
what you need to do is add word-wrap: break-word for the span item. Just like below: