Forum Replies Created
-
Posts
-
Sadly, that didn’t fix it. Right now I have this code below in the Quick CSS box under General Styling and the first (far left) column of my table still overlaps onto the second column whenever the screen goes to a mobile layout.
@media only screen and (max-width: 767px) {
.responsive .avia_scrollable_table .avia-data-table > thead > tr > th, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > th, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > th, .responsive .avia_scrollable_table .avia-data-table > thead > tr > td, .responsive .avia_scrollable_table .avia-data-table > tbody > tr > td, .responsive .avia_scrollable_table .avia-data-table > tfoot > tr > td {
white-space: normal;
}.avia-table {
min-width: 989px;
}
}Just checked my own questions by changing the “description column” to “default” but that didn’t help… since the font is no longer in bold it doesn’t overlap as much but it still runs into the next column when viewed on a mobile device.
FYI: I replaced Ismael’s css with Vinay’s new css solution in the Quick CSS box under General Styling. The table works this way (as in it scrolls and all columns appear correctly except for the far left one)
That doesn’t seem to fix it… All of the columns except the first “description” column on the far left side of the table appears correctly but that first column still overlaps onto the next one. Do I have to change the type of column to “center text” or “default” style?
Thanks! That almost took care of everything :)
The table now scrolls and all of the cells are containing their contents except the description column on the far left… that one is still escaping its cells and overlapping onto the first column to the right. I tried changing it to a center text column or a default column and it is still acting the same way. Any additional tweaks?
Overall, I’m so much happier but it would be nice to eliminate this last bug.
So there is no way to easily fix the bug in enfold itself? The plugin looks good but I would prefer not to turn to an additional plugin if possible. In my case, the table does generate a scroll bar at the bottom on mobile devices but because each table cell does not restrain its content the table is illegible.
I am experiencing the same problem on my site. Originally (when I setup the table 6 months ago) it was working but now the contents of the table cells escape their boxes and overlap each other when viewed on a mobile device. I want the table to simply scroll sideways.
Here is the page with non-responsive table on my site: https://theologicalresonance.com/sponsorship/
Looking forward to the fix!
