Question posted in 
I’m trying to adjust the filter dropdowns within the flexbox container. But for some reason the first two columns in the first row always are shifted. It’s driving me crazy. I also tried using gap instead of margin, but for some reason WordPress (or the Kadence Theme) doesn’t work with Gap.
Here’s how it looks:
Do you have any ideas, why it is shifted and how to fix it?
This is what we tried so far:
We tried several approaches to fix the issue with misaligned filter boxes in a Flexbox layout:
-
Flexbox Width Adjustments: Initially, we adjusted the box widths using flex-basis and added gap to control spacing. However, gap wasn’t supported in WordPress environment.
-
Targeted Adjustments for Specific Boxes: We then targeted the first two boxes using nth-child(1) and nth-child(2) to manually set margin-right. This worsened the layout, causing inconsistent spacing.
-
Manual Spacing and Width Adjustments: We tried removing gap and using margin instead, along with setting width: calc(32% – 10px) for even distribution. This still didn’t resolve the misalignment.
/* Background color for the entire widget */
.wpc-filters-widget-wrapper {
background-color: #6C7159;
/* Light background color for the widget */
padding: 20px;
/* Padding to make the widget more spacious */
border-radius: 8px;
/* Slightly rounded corners */
margin-bottom: 20px;
/* Space below the widget */
display: flex;
/* Flex container for filters */
flex-wrap: wrap;
/* Distribute elements across multiple rows */
justify-content: space-between;
align-items: start;
/* Align elements at the top */
}
/* Styling for individual filter sections */
.wpc-filters-section {
width: 30%;
margin-bottom: 20px !important;
/* Space below each filter section */
margin-right: 2%;
/* Space between columns */
padding: 15px;
/* Padding within each filter section */
border: 1px solid #ccc;
/* Thin border around each filter */
border-radius: 5px;
/* Slightly rounded corners */
box-sizing: border-box;
/* Include padding and border in width calculation */
background-color: #ECEBE3;
position: relative;
/* To position the dropdown arrow absolutely */
}
/* Last filter in the row has no right margin */
.wpc-filters-section:nth-child(3n) {
margin-right: 0 !important;
}
/* Styling for the title in the filter */
.wpc-filters-section .widget-title-wrapper {
display: flex;
align-items: center;
/* Vertically center the text */
width: 100%;
/* Ensure the entire space is used */
padding-right: 25px;
/* Reserve space for the arrow */
}
/* Correct positioning of the dropdown arrow on the right */
.wpc-filters-section select {
appearance: none;
/* Remove platform-specific styles for select */
-webkit-appearance: none;
/* For Safari */
-moz-appearance: none;
/* For Firefox */
padding-right: 30px;
/* Space for the arrow */
width: 100%;
/* Full width */
position: relative;
/* Base positioning for the arrow */
}
.wpc-filters-section::after {
position: absolute;
/* Absolutely positioned within the filter */
right: 10px;
/* Positioning to the right within the filter box */
top: 50%;
/* Vertical center */
transform: translateY(-50%);
/* Exact vertical centering */
pointer-events: none;
/* Ensure the arrow is not clickable */
}
/* Focus effect when a filter is selected or clicked */
.wpc-filters-section:hover {
border-color: #999;
/* Change border color on hover */
background-color: #ffffff;
/* Lighter background on hover */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* Light shadow effect */
}
/* Styling for mobile devices */
@media (max-width: 768px) {
.wpc-filters-section {
width: 100%;
/* On mobile, filters should be displayed in full width */
margin-right: 0 !important;
/* No space between columns on small screens */
}
}<header class=woocommerce-products-header>
<div class=wpc-custom-selected-terms>
<ul class="wpc-filter-chips-list wpc-filter-chips-3528-1 wpc-filter-chips-3528 wpc-empty-chips-container" data-set=3528 data-setcount=3528-1></ul>
</div>
<div class="widget widget_wpc_filters_widget">
<div class="wpc-filters-main-wrap wpc-filter-set-3528" data-set=3528>
<div class="wpc-filters-open-button-container wpc-open-button-3528">
<a class="wpc-open-close-filters-button wpc-show-counts-yes" href=javascript:void(0); data-wid=3528><span
class=wpc-button-inner><span
class=wpc-icon-html-wrapper>
<span
class=wpc-icon-line-1></span>
<span
class=wpc-icon-line-2></span>
<span
class=wpc-icon-line-3></span>
</span>
<span
class=wpc-filters-button-text>Filter</span></span></a></div>
<div class=wpc-spinner></div>
<div class="wpc-filters-widget-content wpc-show-counts-yes">
<div class=wpc-widget-close-container>
<a class=wpc-widget-close-icon>
<span class=wpc-icon-html-wrapper>
<span
class=wpc-icon-line-1></span><span class=wpc-icon-line-2></span><span class=wpc-icon-line-3></span>
</span>
</a><span class=wpc-widget-popup-title>Filter</span></div>
<div class=wpc-filters-widget-containers-wrapper>
<div class=wpc-filters-widget-top-container>
<div class=wpc-widget-top-inside>
<div class=wpc-inner-widget-chips-wrapper>
<ul class="wpc-filter-chips-list wpc-filter-chips-3528-2 wpc-filter-chips-3528 wpc-empty-chips-container" data-set=3528 data-setcount=3528-2></ul>
</div>
</div>
</div>
<div class=wpc-filters-scroll-container>
<div class=wpc-filters-widget-wrapper>
<div class=wpc-instead-of-posts-found></div>
<div class="wpc-filters-section wpc-filters-section-3531 wpc-filter-koffein wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-1 wpc-filter-visible-term-names"
data-fid=3531>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Koffein</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-koffein">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3531">
<li class="wpc-checkbox-item wpc-term-item wpc-term-count-1 wpc-term-id-3" id=wpc-term-post_meta-koffein-3>
<div class=wpc-term-item-content-wrapper><input type=checkbox data-wpc-link=https://example.com/shop/product-category/fruechte/koffeingehalt-0/ id=wpc-checkbox-post_meta-koffein-3>
<label for=wpc-checkbox-post_meta-koffein-3><a
href=https://example.com/shop/product-category/fruechte/koffeingehalt-0/ >0</a> <span
class=wpc-term-count>(<span
class=wpc-term-count-value>1</span>)</span>
</label></div>
</li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3532 wpc-filter-aromen_fruchtig wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3532>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Fruchtige Noten</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-aromen_fruchtig">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3532">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3533 wpc-filter-pflanzliche_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3533>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Pflanzliche Noten</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-pflanzliche_aromen">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3533">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3535 wpc-filter-nussige_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3535>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Nussige Noten</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-nussige_aromen">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3535">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3541 wpc-filter-suse_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3541>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Süße Noten</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-suse_aromen">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3541">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3536 wpc-filter-krauterige_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3536>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Kräuterige Noten</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-krauterige_aromen">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3536">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3537 wpc-filter-wurzige_aromen wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3537>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Würzige Noten</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-wurzige_aromen">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3537">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3540 wpc-filter-winter wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-filter-terms-count-0 wpc-filter-visible-term-names" data-fid=3540>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Winter / Weihnachts-Tees</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-winter">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3540">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3538 wpc-filter-eistee wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3538>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Geeignet als Eistee<span
class=wpc-help-tip data-tip="Tees, die auch kalt gut schmecken"></span></span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-eistee">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3538">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3539 wpc-filter-mild__saurearm wpc-filter-post_meta wpc-filter-layout-checkboxes wpc-filter-full-height wpc-filter-collapsible wpc-closed wpc-filter-terms-count-0 wpc-filter-visible-term-names"
data-fid=3539>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
<button><span
class=wpc-wrap-icons>Mild / Säurearm</span><span
class=wpc-open-icon></span></button></div>
</div>
<div class="wpc-filter-content wpc-filter-mild__saurearm">
<ul class="wpc-filters-ul-list wpc-filters-checkboxes wpc-filters-list-3539">
<li>Es gibt noch keine Filterbegriffe <span class=wpc-help-tip data-tip="Mögliche Gründe: 1) Die Kriterien des Filters enthalten noch keine Begriffe und Sie müssen sie hinzufügen 2) Es wurden zwar Begriffe erstellt, aber kein Beitrag, der gefiltert werden soll, ist mit diesen Begriffen verknüpft 3) Sie haben in den Optionen des Filters alle möglichen Begriffe ausgeschlossen."></span></li>
</ul>
</div>
</div>
<div class="wpc-filters-section wpc-filters-section-3528s wpc-filter-layout-search-field" data-fid=3528s>
<div class=wpc-filter-header>
<div class="widget-title wpc-filter-title">
Gefilterte Produkte durchsuchen</div>
</div>
<form action=https://example.com/shop/product-category/fruechte/ role=search method=GET class=wpc-filter-search-form>
<div class="wpc-search-field-wrapper wpc-search-field-wrapper-3528s">
<span class=wpc-search-icon></span>
<input type=text class=wpc-search-field placeholder value name=srch>
<span class=wpc-search-clear-icon-wrapper>
<a
class=wpc-search-clear-icon href=https://example.com/shop/product-category/fruechte/ title="Suche löschen">×</a>
</span></div>
</form>
</div>
</div>
</div>
<div class=wpc-filters-widget-controls-container>
<div class=wpc-filters-widget-controls-wrapper>
<div class="wpc-filters-widget-controls-item wpc-filters-widget-controls-one">
<a class="wpc-filters-apply-button wpc-posts-loaded" href=https://example.com/shop/product-category/fruechte/>Anwenden <span class=wpc-filters-found-posts-wrapper>(<span
class=wpc-filters-found-posts>1</span>)</span>
</a>
</div>
<div class="wpc-filters-widget-controls-item wpc-filters-widget-controls-two">
<a class=wpc-filters-close-button href=https://example.com/shop/product-category/fruechte/>Abbrechen </a>
</div>
</div>
</div>
<div class=wpc-edit-filter-set>Filter Set</div>
</div>
</div>
</div>
</div>
</header>
2
Answers
I think you should try out below css properties which are equivalent to gap.
grid-gap: 10px 10px; // A shorthand property for the grid-row-gap and grid-column-gap properties
OR
grid-row-gap: 10px;
grid-column-gap: 10px;
OR
row-gap: 10px;
column-gap: 10px;
You have a zero size element
<div class=wpc-instead-of-posts-found></div>which, even though it has zero size is still affecting the layout. I’d suggest hiding it, initially, withdisplay:noneuntil a more robust solution can be found.This also means you can remove the right 2% margin and additionally