How can I modify code for desktop version only?

Technical Q&A
1

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

2

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).

{% include "collection-sorting" %}

and for the CSS:

.desktop-only{
display: none;
}

@media (min-width: 749px){
.desktop-only{
display: block;
}
}

Kind regards,
Diego

3

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,

4

@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