Skip to content

Instantly share code, notes, and snippets.

@wpserve
Last active February 23, 2022 13:50
Show Gist options
  • Save wpserve/7683f0e6e1bfbb0c9eba224137e47942 to your computer and use it in GitHub Desktop.
Save wpserve/7683f0e6e1bfbb0c9eba224137e47942 to your computer and use it in GitHub Desktop.
Horizontal Filters for separate FIlter Set
<?php
add_action('wp_head', 'wpc_inline_filters');
function wpc_inline_filters(){
// Page IDs where this CSS should be displayed
if( is_page( array(2006, 2049) ) ):
?>
<style type="text/css">
@media screen and (min-width: 768px) {
.wpc-filter-set-2058 .wpc-filters-widget-wrapper,
.wpc-filter-set-2008 .wpc-filters-widget-wrapper{
display: flex;
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.wpc-filter-set-2058 .wpc-filters-section,
.wpc-filter-set-2008 .wpc-filters-section{
width: 30%;
margin-right: 24px;
}
.wpc-filter-set-2058 .wpc-filter-content select,
.wpc-filter-set-2008 .wpc-filter-content select{
width: 200px;
}
.wpc-filter-set-2058 form.wpc-filter-range-form,
.wpc-filter-set-2008 form.wpc-filter-range-form{
max-width: 336px;
margin-right: 0;
}
.wpc-filter-set-2058 .wpc-filter-layout-submit-button,
.wpc-filter-set-2058 .wpc-inner-widget-chips-wrapper,
.wpc-filter-set-2058 .wpc-posts-found,
.wpc-filter-set-2008 .wpc-filter-layout-submit-button,
.wpc-filter-set-2008 .wpc-inner-widget-chips-wrapper,
.wpc-filter-set-2008 .wpc-posts-found{
width: 100%;
}
.wpc-filters-widget-main-wrapper.wpc-filter-set-2058 a.wpc-filters-reset-button,
.wpc-filters-widget-main-wrapper.wpc-filter-set-2058 a.wpc-filters-submit-button,
.wpc-filters-widget-main-wrapper.wpc-filter-set-2008 a.wpc-filters-reset-button,
.wpc-filters-widget-main-wrapper.wpc-filter-set-2008 a.wpc-filters-submit-button {
width: 45%;
white-space: inherit;
display: flex;
align-items: center;
justify-content: center;
max-width: 240px;
margin-left: 24px;
}
.wpc-filter-set-2058 .wpc-filter-layout-submit-button,
.wpc-filter-set-2008 .wpc-filter-layout-submit-button{
justify-content: flex-end;
}
}
</style>
<?php
endif;
}
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment