Tables are not responsive

Hey hrskills!

This is an old issue with the table and we haven’t found a fix yet. You can remove the mobile device media query to avoid the wrong table stack. Edit css > shortcodes.css, find this code on line 1251:

@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:block; border-top:none; border-right:none; border-left:none; text-align: center;}
    .responsive .avia_responsive_table .avia-data-table{border-style:solid; border-width: 1px;}
    .responsive .avia_responsive_table .avia-data-table .avia-pricing-row .avia-desc-col{text-align: center;}
    .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th{display:none;}
    .responsive .avia_responsive_table .avia-data-table td:before {
	display:block;
	font-style: italic; font-size: 11px;
	}

	.responsive .avia_responsive_table .avia-data-table td {
		position: relative;
	}

    .responsive .avia_scrollable_table {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }

    .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: nowrap;
    }
}

Remove the code. We might need to adjust the table width. Please get back to us after you removed it.

Best regards,
Ismael

Hi!

Thank you for doing as suggested above. Please add this on Quick CSS or custom.css to resize the table:

@media (max-width: 767px) {
.avia-data-table .avia-pricing-row td, .avia-data-table .avia-pricing-row th {
text-align: center;
font-size: 20px;
line-height: 1.3em;
max-width: 147px;
word-break: break-word;
}
}

Best regards,
Ismael