Desktop or mobile version?

Solved
newArtMix
New Member
4 0 0

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

0 Likes

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

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes
newArtMix
New Member
4 0 0

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,

0 Likes

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

◦ Slideshow section not looking good? Try the Slideshow (PRO) section. No apps required.
◦ Product page images slider for free themes (w/ 20+ customization options): Minimal | Debut | Brooklyn | Supply
◦ If my answer helps you please click on like and Accept as solution!
0 Likes