I have the following fiddle which displays some left tabs and their content to the right. This is fine on desktop, but on table and mobile, the content is too hard to read as it is in two columns.
This is my fiddle:
What would be the best way around this? I was thinking of adding each item on right’s content under its heading on mobile? Or would it be better to keep all the links on the left where they are and then add the content for each of these under the left links?
That would seem the best option to me for mobile as you don’t want the content appearing below the fold after ‘all’ the links as no one will know it appeared.
However you will most likely have to redesign the html to make it do that. You probably need the html as one tab link followed by its tab content and then you could use grid to place the content in the correct place.
Alternatively if you don’t want to rejig the html too much then you could hide all the left links on small screens but include an extra tab link at the top of each of the tab content sections which could be used to toggle the tabs. This of course means having two tabs effectively which is not the best scenario but sometimes ‘needs must’.
One option is to use an HTML table with the “tabs” in the first column and each tab’s “content” in the second column. The width of columns will respond automatically to browser width (and with some regard to the amount of text in the cells of each column).
In the CodePen below I have shown how it could appear after the second tab has been clicked. However I have not implemented the onclick JavaScript required to change visibility of the “content” cells. Text in the second column is within span elements otherwise the cell borders of cells that are not displayed don’t show. Of course you don’t need to show cell borders. In this CodePen the width of “content” text has been limited to 800 pixels maximum to avoid excessively wide text on large browser windows.
An advantage of using an HTML table is that the “content” will always appear alongside its tab.