Hi, I'm trying to format tables on a page and I can't get them to display properly on mobile
https://taxbuddies.ca/images/column_alignment-on-mobile.jpg
I used the table add-on in pagebuilder.
Can you please assist. The tables affected are payroll packages, Tax packages and business Services
Thanks.
Use this custom CSS
@media only screen and (max-width: 844px){
.sppb-addon-table-main.bt tbody td::before, .sppb-addon-table-main.bt tfoot td::before, .sppb-addon-table-main.bt tfoot th::before {
width: 9em !important;
font-weight: 500 !important;
}
#sppb-addon-1683829018800 .sppb-addon-table-main.bt tbody td:before, #sppb-addon-1683829018800 .sppb-addon-table-main th {
word-wrap: break-word;
}
}
Path towards custom CSS: Extensions>Templates>Styles> Click on your current default template name then choose Template Options. Then find custom CSS within the custom code.
Hi
Thanks for contacting us. Could you please give me that specific page link?
-Regards.
I'm sorry, but that did not impact the table at all. I have now separated the table into 3 columns but the table heading is repeating beside each row. I don't understand why it is not just displaying all the rows under the heading. Unless there is a setting I need to change.
Any assistance is appreciated.
I found another way to do this, not using table. closing ticket
Glad to know that.