Issue with performance of content type Table on Mobile devices

Hey michielschoonhoven!

Thank you for using Enfold.

The theme has a script that re-orders the table columns on mobile automatically. Unfortunately, this is not suitable on a few table configuration. Please set the Table Purpose to “tabular” and then set the “Responsive Styling” to “scrollable”.

Best regards,
Ismael

Hey!

Please revert back to the previous settings then add this code in the Quick CSS field.

@media only screen and (max-width: 767px) {
.responsive .avia-pricing-table-container {
    display: table;
    position: relative;
    clear: both;
    width: auto;
    display: table;
    table-layout: fixed;
}

.pricing-table-wrap {
    display: table-cell;
}
}

In the functions.php file, add this.

function ava_pricing_table_mod(){
?>
<script>
(function($){
	function a() {
		$('.avia-pricing-table-container').each(function() {
			$(this).wrap('<div class="avia-data-table-wrap avia_scrollable_table"></div>');
		});
	}

	a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_pricing_table_mod');

This should retain the price styling while adding a scroll bar on mobile view.

Best regards,
Ismael