When using JQuery, I have a group of four tabs that initially appear as shown below:
<ul class="tabs">
<li>
<input type="radio" name="tabs" id="tab1" checked />
<label for="tab1">Item One</label>
<div id="tab-content1" class="tab-content">
<p>Text Here </p>
</div>
</li>
</ul>
On a computer screen, the tabs display correctly. However, on mobile devices, when the screen is reduced in size, the other tabs collapse beneath (as intended). Yet the text within the div does not adjust automatically downwards. This results in the other tabs being positioned behind the visible text.
Is there a way to resolve this issue?
Thank you,
To view the complete code, please visit this JSFiddle page: https://jsfiddle.net/hesbwgsm/2/