Thank you for the insight!
I might have misunderstood your answer or mis-applied your instructions, but I’m curious if you (or anyone else reading this :)) can help me.
I would like my two-column table to stack on mobile, creating one list, rather than to remain in two columns. Here is my current code for my table within the rich text module on the editing page:
<div class="responsive-table">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 50%;">
<ul>
<li>Spending too much time going through resumes?</li>
</ul>
<ul>
<li>High employee churn?</li>
</ul>
<ul>
<li>Employees satisfaction low?</li>
</ul>
</td>
<td style="width: 50%px;">
<ul>
<li><span>Low productivity?</span></li>
</ul>
<ul>
<li><span>Feel like people are a black box?</span></li>
</ul>
<ul>
<li><span>Didn't get the person you hired?</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
And I have added this code to the bottom of the stylesheet:
.responsive-table {
width: 100%;
overflow-y: scroll;
}
Am I missing or misunderstanding something to make the two columns change to one column on mobile?
Thank you!
*** EDIT ***
After re-reading the response, I understand that is to make it overflow ON the horizontal axis, rather than overflow to stack vertically. I’ll play around with it to see what I can do; any help still welcomed in the meantime!