WooCommerce: CSS to make Storefront product tabs horizontal again

wc-css-make-storefront-product-tabs-horizontal

/*
vanbo/wc-css-make-storefront-product-tabs-horizontal
credit: https://gist.github.com/vanbo/c05e9b9512bd53e3680c82e1c6e4e6a3
*/
.product .woocommerce-tabs ul.tabs {
	width: 100%;
	float: none;
	margin-right: 5.8823529412%;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	list-style: none;
	padding: 0;
	/*padding: 0 0 0 1em;*/
	margin: 0 0 1.618em;
	overflow: hidden;
	position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	position: absolute;
	content: ' ';
	width: 100%;
	bottom: 0;
	left: 0;
	/*border-bottom: 1px solid #d3ced2;*/
	z-index: 1;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	border: 1px solid #d3ced2;
	border-radius: 4px 4px 0 0;
	/*background-color: #ebe9eb;*/
	display: inline-block;
	position: relative;
	z-index: 0;
	/*margin: 0 -5px;*/
	padding: 0 1em;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	/*background: #fff;*/
	z-index: 2;
	border-bottom-color: #777;
	background-color: #ebe9eb;
	border: 1px solid #555;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	border: 1px solid #d3ced2;
	position: absolute;
	bottom: -1px;
	width: 0;
	height: 0;
	content: ' ';
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
	left: -6px;
	border-bottom-right-radius: 4px;
	border-width: 0 1px 1px 0;
	box-shadow: 2px 2px 0 #ebe9eb;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before {
	box-shadow: 2px 2px 0 #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	right: -6px;
	border-bottom-left-radius: 4px;
	border-width: 0 0 1px 1px;
	box-shadow: -2px 2px 0 #ebe9eb;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	box-shadow: -2px 2px 0 #fff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: .5em 0;
	/*font-weight: 700;*/
	color: #515151;
	text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: inherit;
	text-shadow: inherit;
	font-weight:bold;
}

/* https://stackoverflow.com/questions/14144426/remove-outline-from-active-jquery-ui-tab */
.woocommerce .wc-tabs li a:focus, .ui-state-focus:focus { outline: none !important }

.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
     outline:none;
}

I found the solution by myself, just add this code to custom Style.CSS:

.product .woocommerce-tabs .panel {
    width: 100%;
}

hey i tried this but the description is not being show what wrong thank you

Hi, how can i make it scrollable in mobile mode?