Tagged: 

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • August 21, 2019 at 5:27 pm #1129649
    KingFilly

    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 5 years, 3 months ago by KingFilly.
    August 21, 2019 at 9:05 pm #1129740
    Victoria

    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,
    Victoria

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.