Skip to content

Instantly share code, notes, and snippets.

@elicus
Created December 3, 2018 08:22
Show Gist options
  • Save elicus/e52155be9c5fe7b1925a9853682af597 to your computer and use it in GitHub Desktop.
Save elicus/e52155be9c5fe7b1925a9853682af597 to your computer and use it in GitHub Desktop.
Custom CSS for Placing Divi Tabs Vertically
.custom-tabs .et_pb_tab_active a {
color: #ffffff!important;
}
.custom-tabs ul.et_pb_tabs_controls {
float: left;
width: 30%;
display: block;
background: transparent;
}
.custom-tabs .et_pb_all_tabs {
display: flex;
width: 65%;
}
.custom-tabs .et_pb_tabs_controls li {
display: block;
width: 100%;
border: 1px solid #d9d9d9;
margin-bottom: 5px;
}
.custom-tabs .et_pb_tabs_controls li:not(.et_pb_tab_active):last-child {
border-right: 1px solid #d9d9d9;
}
.custom-tabs .et_pb_tabs_controls li a {
display: block;
width: 100%;
padding: 15px 30px ;
font-size: 15px;
}
.custom-tabs ul.et_pb_tabs_controls:after {
content: none;
}
.custom-tabs .et_pb_tab {
padding: 0 30px;
}
@media(max-width:767px){
.custom-tabs ul.et_pb_tabs_controls.clearfix {
float: left;
width: 100%;
display: inherit;
}
.custom-tabs .et_pb_all_tabs {
display: flex;
width: 100%;
}
.custom-tabs .et_pb_tab.et_pb_tab.clearfix.et-pb-active-slide {
border-left: 0px solid #d9d9d9;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment