Question 11659 in Shopify Question posted in
The Shopify help center can be found here.

Shopify liquid code, how to use screensize

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 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!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If anyone has the same problem as well, I found some sort of workaround.

    I create both needed elements (dropdown and radio boxes) for this one option and just remove one of them depending on the screen size:

    if (screen.width < 912) {
  var child = document.getElementById("packaging-selection-desktop");
  child.parentNode.removeChild(child);
}
else {
  var child = document.getElementById("packaging-selection-mobile");
  child.parentNode.removeChild(child);
}

  2. 0

    The lightest and optimized solution would be to use a CSS class with media queries instead of JS. If your stylesheet do not already have this kind of utility classes, you may create one.

    So, in your HTML/Liquid code, you might write something like:

    <div class="checkbox-container hide-tablet">
    Your checkbox code
</div>

    And in your CSS stylesheet:

    @media screen and (max-width:912px) {
    display:none;
}

    HTH

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search