-
Posts
-
I’m having the following issue with tables in mobile: the first header of the table disappear when you see it in a mobile device, or even if you just change the width of the browser to force the responsive transformation. See example in: http://imgur.com/a/f5Xuh
The top image is how it looks in mobile devices, the second one is how it looks in the normal browser window. If you look closely, you will see that the header text for the first column (contest date) disappear in the mobile version, and gets replaced by the next header, so, the last column don’t show any header.
Hi,
It is working find on my end. Do you have the latest version of Enfold? Please give us a link to your website.
Regards,
Ismael
This is the site: http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/
I am using the last version (1.4) of enfold.
Please use this link instead (home page does not have tables): http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/home-login
Hi,
I don’t see the Latest Winner just like in the screenshot (http://imgur.com/a/f5Xuh). The table looks fine on mobile view.
Regards,
Ismael
Hi Ismael, thanks for your answer. However, it seems that you didn’t understand: the first cell of the first column, in Desktop view, disappears from the table in Mobile view. Please see my screenshots (http://imgur.com/a/f5Xuh): in the mobile view (first image) the first cell should read: “Contest date” no “Total Days”, just as it reads in the Desktop view (second image). See also this page in my site: http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/home-login and check the table titled “All Active Contests”: the column header “CONTEST” gets replaced by “USERS LEFT” when you change fro desktop to mobile view.
Could you be so kind and try again, please? http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/home-login Thank you. Also, your link to a screenshot is not showing anything.
Thanks, Devin. I recreated all the tables with no success. The problem persists. My best guess so far is that is a problem in one of these classes:
@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;
}
}Hi,
Please update your theme, the last version is 1.5 and it had some update to the tables functionality. You can just download it from themeforest.net
On a different note, your plugin Progress Bar is throwing an error “Uncaught TypeError: Property ‘$’ of object [object Object] is not a function “
in file /wp-content/plugins/progress-bar/js/wppb_animate.js … The first line has an extra $ string. See here for correct format http://stackoverflow.com/a/8396457/1245478
Thanks,
Nick
Thank you so much, Nick, I will do so and inform you of the results. Thank you also for noticing the JS error, very kind of you. :)
I appreciate all the work you have done, but I regret to inform you that the problem persists. I updated all files. See http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/home-login and compare it to a mobile device: see table titled: “All Active Contests”. The header of the first column (“Contest”) disappear in mobile view, and gets replaced by the second header (“Users left”).
Hi,
I think I found the solution at least for when i do this on my local install.
Please add this css to your /css/custom.css file
@media only screen and (max-width: 767px){
.responsive .avia-data-table .avia-button-row, .responsive .avia-data-table tr:first-child th {
display: block !important;
}}When you create your table, you leave the first column as default , but instead switch it to center text column,so that all your columns have the same label. The rows you can leave as is. http://www.clipular.com/c?6787115=BE7FlYdSqvI068OlsW05sr-wK7E&f=.png … Because your column is default, the css class is not showing up in the table code.
**Please remove your cache plugin while developing or you will wind up going crazy from never seeing any of your edits until the cache expires.
Thanks,
Nick
Thank you so much, this changed stuff. However, is still messy. All headers now appear piled up at the top of the table, see: http://imgur.com/W9Fm3Gy. Cache is now deactivated (i just activated yesterday to get a client’s revision). http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/home-login
Hi,
Lets take a step back and see how things look if the mobile version of the table looked like the big screen table but just smaller. Please comment out lines 1059-1064 and 959-977 in /css/shortcodes.css (Just add /* at the start of each block, and */ at its end)
What do you think? or more importantly , how does it look on an iphone or android. On my browser resized it looks like … well,.. yes, a table, with all its parts in correct places.
Thanks,
Nick
- The topic ‘Problem with table layout in mobile devices’ is closed to new replies.