Category filters on mobile

[bendorf_07]

I have a few questions about the categories section on my blog page. First, on an iphone, the category radio options are showing as white boxes? Please see my previous ticket to see the customization that was applied to the category options: https://wp-dreams.com/forums/topic/category-filter-styling/#post-47777

I am also wondering if there is a way to make this a drop down selector on mobile, rather than a list of clickable categories? The categories take up the whole screen and makes it rather difficult to use…

Thank you for your help!

[Ernest Marcinko]

Hi,

Please note that I can’t guarantee anything for customizations.

Apple mobile devices – especially when using the Safari browser are notoriously badly designed, most webkit features are buggy, many CSS rules are simply ignored. This is the case here, where you have this custom rule:

input.asp_radio {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #fff;
    margin: 0 !important;
}

The Iphone Safari simply ignores the “appearance: none” and still displays the radios. The only way to get around it is adding a display rule as well:

input.asp_radio {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-color: #fff;
    margin: 0 !important;
    display: none !important;
}

This should solve it.

[bendorf_07]

Hey Ernest, thank you for the radio option CSS i will give that a try. Do you have any solution for the mobile display of the category selectors? Is it possible to change this to a drop down selection on Mobile?

[Ernest Marcinko]

Well, to change from one layout to another based on device is not possible, as it’s rendered on the server side.

However you could create a copy of the current search bar, configure it for the mobile layout and display the main for desktop and the other one for mobile devices.

[Author]

Posts