[Resolved] Use Radio on desktop, but Select on mobile

[Author]

Posts

[kristofG]

I have 2 filters with radio buttons that are quite long. This is no issue on desktop, but on mobile it causes the filtered results to be displayed a few scrolls down. So I added both type=radio and type=select in the View (hide select on desktop and vice versa).

[wpv-control-post-taxonomy taxonomy="locatie" type="radios" url_param="locatie"]
[wpv-control-post-taxonomy taxonomy="locatie" type="select" url_param="locatie" default_label="Kies een plaats"]

The dropdown works on mobile, but the radio buttons no longer filter on desktop.
How can we fix this so we have radio on large screens and select on small screens?

hidden link

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Kristof,

The problem here is that you're not allowed to have the same filter shortcode with multiple display styles because 1 filter shortcode is tied to query filter.

My advice here is that you're going to need to create a separate copy view that you will hide on desktops but only display on mobiles. If elementor supports this then you can have both views on the page and the desktop version will only show on the desktop and the mobile version will only show on the mobiles.

Please let me know if this helps.

Thanks,
Shane

[kristofG]

Thank you. I have duplicated the View so I have a desktop version with Radio buttons and a mobile version with the Dropdowns. Via css I hide the one on desktop and vice versa.