Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 17, 2016 at 9:35 pm #673861
    metamorfic

    Hi! I created a column description to be able to apply a specific width to it (20%). It works great on normal view, but when it turn to mobile, my first entry description cell disappear and this code Mode d’actionappear in each standard entry cell. I also see that there is this code that appear (<td class> = $0) when it turn to mobile. Can you help fix this please?

    August 18, 2016 at 4:19 am #673982
    Jordan

    Hey metamorfic,

    Thanks for getting in touch with us!

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    
@media only screen and (max-width: 767px){
.responsive .avia_responsive_table .avia-data-table td:before {
    display: none !important;
}
}

    Best regards,
    Jordan

    August 18, 2016 at 7:06 pm #674318
    metamorfic

    Hi Jordan, this removed the repeating code unwanted, but now I’m missing my first cell on mobile. Can you figure it out? Thanks!

    August 19, 2016 at 6:34 am #674513
    Jordan

    Hi,

    Thanks for getting back to me.

    Please temporarily remove the code and could you please provide login details to your site, so that we can have a closer look. You can place the information in the Private Content section of your reply.

    Best regards,
    Jordan

    August 22, 2016 at 10:20 pm #676055
    metamorfic

    Hi Jordan!

    See in private content for access to our site.

    Thanks again!

    August 25, 2016 at 12:09 pm #677458
    Ismael

    Hi,

    Edit the table, set the table purpose to tabular and the responsive styling to scrollable then add the following css code in the Quick CSS field. 

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

    We duplicated the table, placed it below the current one and edited the options. Please look at the difference.

    Best regards,
    Ismael

    August 25, 2016 at 9:06 pm #677738
    metamorfic

    Hi Ismael!

    This is working with your table and mine when I set it to scrollable. But in both case, some words are too long and exceed in the second column on mobile in vertical. I made the first column 33% to give it a chance but it’s still not enough. Can we fix this an other way?

    Thanks a lot!!

    August 31, 2016 at 3:53 am #679772
    Ismael

    Hi,

    Did you add the css code that we provided above? You can also decrease the font size on smaller screens.

    Best regards,
    Ismael

    September 8, 2016 at 4:05 pm #683770
    metamorfic

    Yes I add the css and then I played with the font size and removed the padding around the table which gave more space for it all. So thanks a lot!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Table description column doesn't display properly on mobile’ is closed to new replies.