-2

this is what I want

this is what I'm getting

I have inserted a view and one column refuses to word wrap on mobile display. On normal desktop display it wraps just fine. But as seen in the second image taken on my phone, it puts everything in that one column only as one sentence.

This only happens with this view table. A regular table works fine as seen in the second image.

So, how do I fix this? Most using my site uses it via phone, and this is breaking their experience. Thanks.

Improve this question

1 Answer 1

Reset to default
0

You can see the same effect using for example the chrome developer tools, where you can set the screen dimensions.

In you specific case, you have a white-space: nowrap applied to your table cells for devices up to 768px. This is what prevents the line wrapping, see these screenshots.

What your site currently has:

screenshot of chrome devtools with the original attributes

With the white-space: nowrap removed:

screenshot of chrome devtools with change to white-space attribute

Improve this answer
2
  • I appreciate your help! Now, to try and find this tables.less file. Just going to the listed location was a bust.... Still looking though.
    – Travis
    Nov 7, 2021 at 4:26
  • Ok I was able to fix this. I added the following to my stylesheet... .table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th { white-space: normal !important;}
    – Travis
    Nov 7, 2021 at 4:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.