Hi
On the Shop Page of my Wordpress site, the ‘Product Filters’ are displayed on the top.
Due to the filter # (11), the Product filter section is split into 2 rows.
I want to display the Filters on a single row.
Am I correct to assume by reducing the Font size of the filter(s), the Filters will display in single row ?
If yes, can someone care to share the custom css code ?
Shop page link
On the theme demo page, the filters are displayed on a single row, although the filter # is 6, whereas, on my site the filter # is 11
It’s a long shot, but it’s worth giving it a try. Any other suggestions is welcome.
Thanks in Advance.
There’s a chance that decreasing the font size will get them onto a new row, but then readability comes into play.
The issue really is the number of filters and how wordy they are. If you look at the demo, there are six, and they are all only one word. You’ve got eleven, five of which are multi words.
There are some tweaks to make it better but I don’t know the downstream effects on other pages.
- Remove the max-width on .nasa-filter-action
.nasa-filter-action {
min-width: 50%;
/* max-width: 70%; */
}
- Reduce the font-size and margin on the list items
.nasa-labels-filter-top .nasa-top-row-filter li {
list-style: none;
float: left;
margin-right: 1rem; /* changed */
font-size: 100%; /* changed */
font-weight: 700;
}
- Simplify the filter names
- Product Type to Type
- Brand Collection to Collection
- Capacity in Ml to Capacity
- Packing Quantity to Quantity
If you do those things, the menu will show on one line in a full width browser window
Notice the text I highlighted above. As soon as the window shrinks just a bit, the wrapping re-occurs. Chasing pixel perfection will drive you batty as no two people will use the same exact browser width.
If it were me with this, I’d probably consider doing just step one above and remove the max-width on that container so it fills up the entirety of the space, but that would be it. Leave the font size alone and let the wrapping occur gracefully.
2 Likes
Hi Dave
Thanks for sharing your expertise !
I have done all 3 steps.
On the ‘Pots & Pans’ category page, the filters are rendering quite nicely on a single row.
However, on the Plates/Platter category, the filters are still showing on 2 rows.
Yet, there’s alot of space btwn the Filter section & Page Col #
Plates/ Platter
Do you mind reviewing the solution ? Perhaps, it needs some tweaking ?
Thanks
If you go into developer tools, it’s still showing the max-width in the css. Is the page using the correct version of the css file?
1 Like
Good qtn Dave.
I can confirm I have added the custom css code.
I’m not familiar with the developer tools, can you check the css for the pots & pan page ?
Pots & Page
Rgds.
There are two ways to access them.
You can right click on the menu and select “Inspect Element” OR you can hit the F12 key.
You will then need to find the appropriate element (in this case, it’s one of the parents of the menu items.)
That being said, are you sure you’re changing the right thing? I can see the version changing, but the css file still has the original value.
Here’s a way to see - change the min value and then go back into the developer tools and see which one has changed, the top or the bottom. I’m guessing it’s the top…
@dave,
Whilst I appreciate your valued feedback, the ‘Filters’ are displaying on 2 rows on the 14" laptop.
I don’t see how we can squeeze #11 Filters on the 14" laptop. Perhaps we should leave it as is.
Your thoughts ?
Meanwhile, I am going to open another ticket to change the B/G colors of the filter.
Hence why I said
And like I said, I would have done #1 and removed the max width and reduce the font size a bit and then let the wrapping occur as needed. Though I probably would have also done #3 and simplified the filter text as they are overly wordy
