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;
}

Hello, I used the CSS code and the tabs are horizontal but the position of the text under the tab remained same as before as in the screenshot below. Please help me get it right.

The same problem. Have you found a solution to expand-widen a text area???

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?