Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 15, 2017 at 10:50 pm #747707
    Julie

    Hello!
    Is there Quick CSS to reduce column width in the responsive scrollable table to 50% on small mobile screens?
    I tried a few options but none of them seemed to work.
    Hope you can help.
    Thanks!

    February 15, 2017 at 11:18 pm #747712
    Basilis

    Hey Julie!

    You can use media queries

    @media queries Responsiveness

    and target table td and add a max-width property.
    But – please note that even if you do that and it will work, at the end you will be have issues as the height will be way to tall.

    Let us know if we can help you further

    Regards,
    Basilis

    February 15, 2017 at 11:56 pm #747721
    Julie

    Hey Basilis,
    Sorry, I am having trouble getting this right.
    I added this:
    @media only screen and (max-width: 767px) {
    .page-id-1374 td { max-width: 50% !important;
    }
    }

    That helps, but it is still very wide because the text is not wrapping.
    I still want it to be scrollable, just want to keep the width from going quite so wide. If it would be half as wide and wrap, only on small screens, that would work.
    What am I missing?
    Thanks!

    February 21, 2017 at 7:36 am #749765
    Ismael

    Hey!

    Thank you for the update.

    Please add this code in the Quick CSS field:

    @media only screen and (max-width: 800px) {
.avia_scrollable_table .avia-table {
    width: 768px;
}

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

    Adjust the width value as needed.

    Best regards,
    Ismael

    February 21, 2017 at 9:11 pm #750154
    Julie

    Hey Ismael,
    YES, this is exactly what I was hoping for. :)
    Thank you so much for your help!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘How to reduce scrollable table column width in mobile views?’ is closed to new replies.