Tabular Data Table (scrollable) inside of a tab section on mobile

Hey navindesigns,
Thank you for your patience, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-layout-tab-inner > .container {
    width: 100%;
    max-width: 100%;
}
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-table {
    width: 100%;
}
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-data-table > thead > tr > th, 
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-data-table > tbody > tr > th, 
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-data-table > tfoot > tr > th, 
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-data-table > thead > tr > td, 
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-data-table > tbody > tr > td, 
.responsive #top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table .avia-data-table > tfoot > tr > td {
    white-space: normal;
}
#top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table > .avia-table tr th, 
#top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table > .avia-table tr td, 
#top #wrap_all .av-layout-tab-inner > .container > .avia_scrollable_table > .avia-table tr {
    padding: 5px;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the feedback, please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
#top #wrap_all .av-tab-section-tab-title-container .av-section-tab-title {
    width: 50% !important;
}
#top #wrap_all .av-tab-section-tab-title-container .av-section-tab-title .av-tab-arrow-container {
	margin: auto;
}
}

After applying the css, please clear your browser cache and check.
This is the expected results at 425px:

Best regards,
Mike

Hi,
Glad this is helping, please try this css for the arrow:

@media only screen and (min-width: 767px) { 
	#top #wrap_all .av-tab-arrow-container {
    margin: auto;
	}
}

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold, have a great day.

Best regards,
Mike