Table element

Hi Magdalena,

Can you try adding this CSS code in Enfold > General Styling > Quick CSS:

@media only screen and (max-width:767px) {
  .responsive div .avia_responsive_table .avia-data-table table, 
  .responsive div .avia_responsive_table .avia-data-table tbody, 
  .responsive div .avia_responsive_table .avia-data-table tr, 
  .responsive div .avia_responsive_table .avia-data-table td, 
  .responsive div .avia_responsive_table .avia-data-table th {
    display: revert;
  }
}

Best regards,
Nikko

Hi madakumbu,

Can you give us the link to your site? so we can inspect why it’s not working.

Best regards,
Nikko

Hi madakumbu,

I tried to add the code however the page seems to loading to slowly on my end.
Please try to add this CSS code in Enfold > General Styling > Quick CSS:

@media only screen and (max-width:767px) {
  .responsive .avia-pricing-table-container, 
  .responsive .pricing-table-wrap {
    display: flex;
  }
}

Best regards,
Nikko

Hi madakumbu,

Please try to add this CSS code in Enfold > General Styling > Quick CSS:

@media only screen and (max-width:767px) {
  .responsive #top, 
  .responsive #top #wrap_all {
    overflow: visible;
  }
}

Best regards,
Nikko

Hi madakumbu,

I don’t think it’s possible to make it scrollable only for the table without affecting the page, that’s the reason why tables are stacked up on each other on mobile since it has a narrow width. The other method would be to recreate the table and show it only for mobile.

Best regards,
Nikko