Tables should be responsive

[curtismchale]

Source

• 6464

Describe the bug

Table on the swimming page doesn't go responsive for mobile devices when viewed there. This makes the table content unviewable for users.

To fix we should be able to add <div class="table-responsive"> around the table according to Bootstrap 3.3.7 docs.

To reproduce

Steps to reproduce the behavior:

1. Go to https://www.santa-ana.org/swimming-lessons/ on a mobile sized screen
2. Scroll down to wide table
3. See that you can't scroll side to side on the table

Expected behavior

Table should use Bootstrap 3.3.7 responsive table formats.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Anything under 768px wide should get a responsive table if the table is wide enough

QA

Notes:

Links:

*

[curtismchale]

@kevindherman I came back to look at this and the expected class is wrapped around the table to make it responsive. I tested with a number of different devices I have around and it worked on all of them. I'm closing this. Open again if you can find a way to reproduce it.

[curtismchale]

We did add table-responsive so I need to look at how WP outputs the tables and then see about adding the table-responsive around it.

Luke suggests that we grab the current Bootstrap responsive table CSS and then add it in a custom file and apply it to our tables.