Tabelle: Spalten auf kleinen Displays untereinander angezeigt

Hi piaspilauer,

Thanks for giving us admin access, I have modified the page (link in private content).
I unchecked the hide in mobile options for the table and then in Advanced > Developer Settings > Custom CSS class field I put: two-columns and added this CSS code in Quick CSS:

@media only screen and (max-width:767px) {
  #top #wrap_all #main .two-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

If you want to use this other tables then just edit the table and go to Advanced > Developer Settings > Custom CSS class field and put: two-columns
Please review your website.

Best regards,
Nikko

Hi Pia,

Thanks for giving us admin access.
Cycle 4000 uses Data Table while the one I fixed before was for Pricing Table, I have adjusted the CSS code so it will accomodate both layouts:

@media only screen and (max-width:767px) {
  #top #wrap_all #main .two-columns.avia-pricing-table-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #top #wrap_all #main .two-columns.avia-data-table tbody {
    display: table-row-group;
  }

  #top #wrap_all #main .two-columns.avia-data-table tr {
    display: table-row;
  }

  #top #wrap_all #main .two-columns.avia-data-table td {
    display: table-cell;
  }
}

Please review your site.

Best regards,
Nikko

Hi Pia,

The code I gave is only for two columns, I think 3 columns for mobile looks terrible and hard to read, and we don’t suggest doing that.
You can still use it for datatable, though I made an adjustment to the CSS code since some text overflows:

@media only screen and (max-width:767px) {
  #top #wrap_all #main .two-columns.avia-pricing-table-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #top #wrap_all #main .two-columns.avia-data-table tbody {
    display: table-row-group;
  }

  #top #wrap_all #main .two-columns.avia-data-table tr {
    display: table-row;
  }

  #top #wrap_all #main .two-columns.avia-data-table td {
    display: table-cell;
    overflow-wrap: break-word;
  }
}

However, for pricing tables, I can’t make it to work, the only workaround I could suggest for pricing table is to hide it on mobile and to recreate it for mobile.

Best regards,
Nikko