Tab element not displaying correctly on Mobile Device

[j300bac]

I am using the Tab element in Pro to display a timetable on my site which displays correctly on tablet, laptop and desktop but not on mobile devices. It cuts off half the timetable and offers no scroll ability when viewing from a smart phone. I have changed width of the tab and container to no avail. Please see attached images for how it displays on laptop vs mobile.

Many Thanks for your assistance

[friech]

Hi J,

Thank you for writing in, regretfully tables in general are not really suitable for mobile view. You can add the custom CSS below to make the tab element scrollable on mobile view.

@media (max-width: 767px) {
	$el.x-tabs {
		overflow: scroll;
	}
}

Add this to the Tab element’s Element CSS area.

Hope it helps,
Cheers!