Column width ignored?
-
I have a strange one here. My CSS (stored in Tablepress Plugin settings>custom CSS) is below. But I can’t get column 8 (one with the stars) not to break the stars into two rows on mobile. When I watch the table load on mobile, it loads fine (all stars in one row), but then some other formatting is loaded and that breaks it into two rows. Tested on various mobile browsers.
Strangely, when I had the width at 110px, it was breaking 1 star into another column. When I increased the width to 130px, it put 2 stars into the second row?? see image of how I see it on my mobile: https://mega.nz/file/qfJBVCSY#IJQjMUUvJikkDnFP9c0w-9yMHq-Nv12T8cniE7GMUbA
Note that all mobile emulators, developer tools on PC show it correctly, it only breaks on actual mobile.
.tablepress tbody td, .tablepress tfoot th, .tablepress thead th { font-size: 13px !important; } .tablepress-table-description { background: #fffdbd; padding: 15px; color: #616161; font-size: 13px !important; } .tablepress-id-1 td.column-1, .tablepress-id-1 td.column-2 { width: 66px; } .tablepress-id-1 td.column-4 { width: 50px; } .tablepress-id-1 td.column-8 { min-width: 130px; color: white; word-break: keep-all; } .tablepress-id-1 td.column-9 { min-width: 200px; } @media only screen and (min-width : 1000px) { .tablepress-id-1 td.column-9 { min-width: 20vw; } } .tablepress-id-4 td.column-11 { max-width: 200px; }
The page I need help with: [log in to see the link]
- The topic ‘Column width ignored?’ is closed to new replies.