Continuing the discussion from Search results shows all categories listings not just mine selected category
where i prefer to do category selection(filtering) using drop-down menu in the search bar of a /listings/ page instead of do search and then do filtering using sidebar
After disabling the filtering in sidebar and moving it to the search bar (/wp-admin/admin.php?page=hp_settings , Listings tab, Default Fields, add “Categories” there)
“Filter” button and sidebar remains just wasting space (can this be improved by default, so the sidebar gets hidden?)
The workaround to hide that sidebar and filter button in favor of more listing columns (please improve it if it contains issues) via /wp-admin/customize.php , Additional CSS
/* /listings/ page change - Hide filter sidebar */
aside.hp-page__sidebar {
display: none !important;
}
/* Use the hidden sidebar space to add more listings columns */
/* 3 columns on desktop */
.hp-template--listings-view-page .hp-page__content {
flex-basis: 100% !important;
max-width: 100% !important;
}
.hp-listings .hp-grid__item {
flex-basis: calc(33.333% - 10px) !important;
max-width: calc(33.333% - 10px) !important;
}
/* 2 columns on tablets */
@media only screen and (max-width: 1024px) {
.hp-listings .hp-grid__item {
flex-basis: calc(50% - 10px) !important;
max-width: calc(50% - 10px) !important;
}
}
/* 1 column on mobile */
@media only screen and (max-width: 768px) {
.hp-listings .hp-grid__item {
flex-basis: 100% !important;
max-width: 100% !important;
}
}
/* end of /listings/ page change */
alternative and maybe better way is:
.hp-template--listings-view-page .hp-page__content {
flex-basis: 100% !important;
max-width: 100% !important;
}
hp-template--listings-view-page .hp-page__sidebar {
display:none!important;
}
Second code leaves maximum 2 columns per row, the count of listings per page is the same for both CSS snippets, 3 column mode seems to be more space efficient (less scrolling).