Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #1129649

    Hi developers!

    I created a table with 3 columns. 2 of them shows 2 buttons on each row. (1 button per column)
    On desktop its perfect, but on mobile it only shows 2 columns and the rest is visible via scrolling.
    It should show all 3 columns on mobile in 1 screen. (so no scrolling to the site)
    Is it some how possible to do this? It is not a problem if the content is a smaller.

    Since my client is working with a lot of data for the fields and constantly changes these date, i wouldn’t like to create a copy of it.
    So just some CSS to show this table well on mobile. (with 2 buttons on the screen)

    link of website in the private content.
    On the page its is the first table. (of 3) So the one with the green and orange buttons.

    • This topic was modified 9 months, 2 weeks ago by  KingFilly.

    Hey KingFilly,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

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

    If you need further assistance please let us know.

    Best regards,

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

You must be logged in to reply to this topic.