Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #23615

    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.

    #120509

    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

    #120510

    This is the site: http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/

    I am using the last version (1.4) of enfold.

    #120511

    Please use this link instead (home page does not have tables): http://test.crowdini.com.php53-17.ord1-1.websitetestlink.com/home-login

    #120512

    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

    #120513

    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.

    #120514

    Hi,

    I’m sorry but I visited the site again and it is unavailable.

    Regards,

    Ismael

    #120515

    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.

    #120516

    Hi LoganGattisDesigns,

    Can you try re-creating that table and see if that fixes it?

    Regards,

    Devin

    #120517

    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;
    }
    }

    #120518

    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

    #120519

    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. :)

    #120520

    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”).

    #120521

    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

    #120522

    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

    #120523

    I removed the CSS change, it looked worst that way.

    #120524

    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

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Problem with table layout in mobile devices’ is closed to new replies.