Solved

How can I modify liquid code for different screen sizes?

Hans_Wu
Tourist
4 1 0

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!

Accepted Solution (1)

Hans_Wu
Tourist
4 1 0

This is an 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.

 

View solution in original post

Reply 1 (1)

Hans_Wu
Tourist
4 1 0

This is an 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.