List&Grid elements hide in mobile

Ask the community
,
1

I use List & Grid.
I want to hide elements in mobile display.
I can do that, but when another page edit the elements appear automatically.
Can I hide List & Grid elements in mobile?

2

Use wix-window.formFactor to determine whether you are running on desktop or mobile . You can then hide() or show() depending on the result.

3

Yisrael Thanks your reply.
I saw the wix-widow.formFactor, but I can’t understand how to write.
So Please tell me sample code or something.

4

Hi,

import wixWindow from 'wix-window';
$w.onReady(() => {
   let formFactor = wixWindow.formFactor;
   if (formFactor === 'Mobile') {
      $w('#yourElement').hide();
   }
});

Roi.

5

Thank you Roi

I wrote your code, but its not work,

so I wrote like this page Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com

but It’s not work,

This is the code I wrote.
Please tell me where is wrong.
*I selected the Hidden on load checkbox in the Properties panel.
*button5 & button7 is differ List & Grid items

import wixWindow from ‘wix-window’;
$w.onReady( function () {
if(wixWindow.formFactor === “mobile” &&
wixWindow.rendering.renderCycle === 1) {
$w(“#button5”).hide();
$w(“#button7”).hide();
}
} );

6

Mobile not mobile

7

Hi Yisrael,
Does renderCycle can work in Mobile device now???
It’s because I have used renderCycle in my page code $w.onReady( ) but mobile device cannot do the function inside my renderCycle.

8

See this: Appendix: Rendering Optimization

I would suggest testing it without the check for renderCycle and see how it works. You can always put the renderCycle test back in.

9

Thanks Yisrael :slight_smile:
I try it now

10

After all It will not move.

I have to delete the button use hide element button.
But when another place edit, the button I want to hide appear again.

1026×860 240 KB

import wixWindow from ‘wix-window’;
$w.onReady( function () {
if(wixWindow.formFactor === “Mobile” &&
wixWindow.rendering.renderCycle === 1) {
$w(" #button5 “).hide();
$w(” #button7 ").hide();
}
} );