Hidden for All Closed
Swap Columns for Mobile
Theme Options > Custom CSS
@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}
/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}
.second-on-mobile {
-webkit-order: 2;
order: 2;
}
.third-on-mobile {
-webkit-order: 3;
order: 3;
}
.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}
}
Row Settings > Advanced > CSS Class
custom_row
Row > Column One Settings > Advanced > CSS Class
second-on-mobile
Row > Column Two Settings > Advanced > CSS Class
first-on-mobile
Horizontally Center Content in Columns
Row Settings > Design > Sizing
Equalize Column Heights = Yes
Row > Column Settings > Advanced > Custom CSS > Main Element
margin-top: auto;
margin-bottom: auto;
Add Close Button to Accordion Module
Theme Options > Integration > Add this code to the head of you blog
<script>
jQuery(function($){
$(‘.et_pb_toggle_title’).click(function(){
var $toggle = $(this).closest(‘.et_pb_toggle’);
if (!$toggle.hasClass(‘et_pb_accordion_toggling’)) {
var $accordion = $toggle.closest(‘.et_pb_accordion’);
if ($toggle.hasClass(‘et_pb_toggle_open’)) {
$accordion.addClass(‘et_pb_accordion_toggling’);
$toggle.find(‘.et_pb_toggle_content’).slideToggle(700, function() {
$toggle.removeClass(‘et_pb_toggle_open’).addClass(‘et_pb_toggle_close’);
});
}
setTimeout(function(){
$accordion.removeClass(‘et_pb_accordion_toggling’);
}, 750);
}
});
});
</script>
Theme Options > Custom CSS
Accordion Module Initially Closed
New Accordion Item > Custom CSS > Main Element
Multiple Columns in Row for Modules
Theme Options > Custom CSS
.thirteen-columns .et_pb_module {width: 7.69%; float: left;}
.twelve-columns .et_pb_module {width: 8.33%; float: left;}
.eleven-columns .et_pb_module {width: 9.09%; float: left;}
.ten-columns .et_pb_module {width: 10%; float: left;}
.nine-columns .et_pb_module {width: 11.11%; float: left;}
.eight-columns .et_pb_module {width: 12.5%; float: left;}
.seven-columns .et_pb_module {width: 14.28%; float: left;}
.six-columns .et_pb_module {width: 16.66%; float: left;}
.five-columns .et_pb_module {width: 20%; float: left;}
.four-columns .et_pb_module {width: 25%; float: left;}
@media (max-width: 980px){
.thirteen-columns .et_pb_module {width: 20%;}
.twelve-columns .et_pb_module {width: 14.8%;}
.eleven-columns .et_pb_module {width: 20%;}
.ten-columns .et_pb_module {width: 20%;}
.nine-columns .et_pb_module {width: 33.3%;}
.eight-columns .et_pb_module {width: 25%;}
.seven-columns .et_pb_module {width: 25%;}
.six-columns .et_pb_module {width: 25%;}
.five-columns .et_pb_module {width: 33.3%;}
.four-columns .et_pb_module {width: 33.3%;}
}
@media all and (max-width: 767px) {
.thirteen-columns .et_pb_module {width: 100%;}
.twelve-columns .et_pb_module {width: 100%;}
.eleven-columns .et_pb_module {width: 100%;}
.ten-columns .et_pb_module {width: 100%;}
.nine-columns .et_pb_module {width: 100%;}
.eight-columns .et_pb_module {width: 100%;}
.seven-columns .et_pb_module {width: 100%;}
.six-columns .et_pb_module {width: 100%;}
.five-columns .et_pb_module {width: 100%;}
.four-columns .et_pb_module {width: 100%;}
}