-
Posts
-
Hi All,
I am using Enfold on my site http://slugradio.com. I have set up a table here for my radio station’s programming schedule. I find that it looks fine on my desktop computer, but if I try to look at the same data on my iPhone or iPad there are major problems. On the iPhone, everything is shifted by one day. Specialty programs, New Music Monday shows up on the iPhone as Tuesday. Covers That Don’t Suck is supposed to be on Thursdays, and it shows up on the iPhone as Friday.
On the iPad the table doesn’t resize at all and just extends over into the right side bar. Any ideas? I tried using a third party plugin called TablePress as well, but it required way too much custom CSS to get it to look the way I wanted, and it isn’t responsive either so everything was cut off on my mobile devices.
Any suggestions?
Hey richgates!
Thank you for using the theme. I hope you’re doing well today.
I’m sorry but this has been an old issue with the theme and no is available yet. Please edit css > shortcodes.css, go to the Table section then look for this code:
@media only screen and (max-width: 767px) { .responsive div .avia-data-table table, .responsive div .avia-data-table tbody, .responsive div .avia-data-table tr, .responsive div .avia-data-table td, .responsive div .avia-data-table th{display:block; border-top:none; border-right:none; border-left:none; text-align: center;} .responsive .avia-data-table{border-style:solid; border-width: 1px;} .responsive .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;} .responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th{display:none;} .responsive .avia-data-table td:before { display:block; font-style: italic; font-size: 11px; } .responsive .avia-data-table td { position: relative; } }Remove it. We might need to adjust the size of the table on mobile view.
Best regards,
IsmaelYeah, this isn’t a viable solution. The whole point of the theme was to take advantage of the responsiveness for mobile display. All this does is turn off the responsive display for the iPhone and make the table go off the screen with no means to even scroll over to see the rest of the schedule.
Is there any plan on fixing this bug?
Hey!
Table by themselves are not responsive so the way the theme handles them is to re-build them into a smaller table with the column headers over each row element. If there is any missing it can cause issues with the the incorrect header over a row entry.
I know it was discussed recently to add a secondary method of handling tables but I can’t seem to find the discussion when searching for it in our internal repository. It has either already been fixed in the recent 2.6 release or will be soon.
Cheers!
DevinI’m having a similar issue, but your explanation above seems off. Instead of the columns showing the element data below, all of the columns are showing in rows before the content in the rows when looking on mobile. Here’s an example: http://llangors.wales/year-2/
If you switch to mobile view in dev tools, you’ll see Monday, Tuesday, Wednesday etc as the first 5 rows and the row content that should be under each day is below them. This makes the table data meaningless on a mobile. If I set the table to be scrollable, all the text bleeds across each other, so that’s no use either.
Is there a method for changing the table to show each table column above the next column on mobiles?
Hi,
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
Andy
- You must be logged in to reply to this topic.