How to switch (1) search bar + main field and (2) Fields order

On the Vehica inventory page the filter fields sit above the search bar that holds the All / New / Used tabs and the keyword box. This article gives you the CSS that swaps those two rows on desktop screens.

1 minute read

This article explains how to change the order of these two sections on desktop.

Top of the inventory page: the rows of filter fields outlined in orange and, below them, the bar with the All / New / Used tabs and the keyword box outlined in green, with an arrow pointing at each

Add the CSS code below to your website. This article explains how to add custom CSS to any WordPress theme: How to use Child Theme? How to change files (php / css / js) and keep theme future update compatibility?

css

@media (min-width:1024px) {
.vehica-inventory-v1__top__inner {
display:flex!important;
width:100%!important;
flex-direction:column!important;
}
.vehica-results__fields {
order:2!important;
}

.vehica-inventory-v1__bar {
order:1!important;
}
}

Desktop only

The rule sits inside a @media (min-width:1024px) query, so the order changes on screens 1024px and wider only. Narrower screens keep the original order.

It will look like this:

The same inventory page after the change: the bar with the All (13) / New (7) / Used (6) tabs and the keyword box now sits above the two rows of filter fields, with "13 Results" underneath

Keep reading

How to add CSS code that is future update compatible

Ask the people who build Vehica

We answer by email from support@tangiblewp.com. With Premium Support, we also fix your site when something breaks.

Send us a message What Premium Support covers

We can also run your site for you, or build a new one.

Was this guide helpful?