Liquid, JavaScript, themes, sales channels
Hi,
I need to add some code, but only for the desktop version. How I could check it correctly?
{% if max_width == 749px %} - doesn't work
I also need to hide SORTING on a mobile version
How can I set a condition like this
{% if "not mobile version" %}
{% include "collection-sorting" %}
{% endif %}
Thanks in advance
Solved! Go to the solution
This is an accepted solution.
@newArtMix
You're welcome. Yes, that is pretty much it.
If the issue is resolved kindly make sure to click on "Accept as Solution" for the answer that helped you, this way other people in the community can benefit from it in the future when dealing with something similar.
Kind regards,
Diego
You can't differ desktop/mobile on liquid, only on CSS or Javascript.
The easiest way to achieve this would be encapsulating the "collection-sorting" with a div (or giving it a class directly).
<div class="desktop-only">{% include "collection-sorting" %}</div>
and for the CSS:
.desktop-only{
display: none;
}
@media (min-width: 749px){
.desktop-only{
display: block;
}
}
Kind regards,
Diego
Thank you so much. It works perfectly!
If I understand correctly – when I want to do something only for the mobile version:
.mobile-only{
display: none;
}
@media (max-width: 749px){
.mobile-only{
display: block;
}
}
Best wishes,
This is an accepted solution.
@newArtMix
You're welcome. Yes, that is pretty much it.
If the issue is resolved kindly make sure to click on "Accept as Solution" for the answer that helped you, this way other people in the community can benefit from it in the future when dealing with something similar.
Kind regards,
Diego
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024