How can I modify liquid code for different screen sizes?

[Hans_Wu]

Hello,

I want to display radio boxes and dropdowns for selecting a variant on desktop and only dropdowns on mobile.

At the moment it displays the desktop variant on both. And I would have to differ within the liquid code which creates the dropdowns/radio boxes between the screen size. So that it can create the right elements.

But as liquid can not differ between it. I need a workaround for it.

I can also not put a <script> around it and differ with js, because the liquid code in it does not work anymore.

Does someone know a workaround for that?

Thank you!

[Hans_Wu · Accepted solution]

Hello,

I was able to fix this issue.

I made extra code with creates checkboxes as well as the dropdowns. 

But the checkboxes don't have any classes, where JS would be behind.

After that I made a custom script, which changes the value of the checkboxes when the dropdown changes and changes the value of the dropdown when the checkbox changes. Then I did not display the checkboxes for mobile and the dropdowns not for desktop.

Problem solved.