Hide on Desktop Show on Mobile

Hi, I’ve followed the instructions on the help page to implement this but I can’t get it to work. Please help. The website is texasisrael.org/honoring-att
The two videos at the bottom should be hidden on mobile (working). But in their place should be two Gifs that are shown on mobile (not working) and hidden on desktop (working).

@myerfreimann

Try this:

import wixWindow from 'wix-window';

$w.onReady(function () {
let formFactor = wixWindow.formFactor; 
if (formFactor === "Mobile"){
    <show mobile only elements>
    }else{
    <show desktop only elements>
    }
})

Tiaan

That doesn’t work

@myerfreimann

Please share the code you’ve built

sure, first I tried the instructions here: Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com

and the code looked like this:

$w.onReady(function () {
if(wixWindow.formFactor === “Mobile”){
$w(“#image9”).show();
$w(“#image10”).show();
}
})
;

I set “hidden on load” in element properties. This approach didn’t work so I tried what a Mix rep in the forum suggested and the code looked like this:

import wixWindow from ‘wix-window’;

$w.onReady(function () {
if (wixWindow.formFactor === “Desktop”) {
$w(“#image9”).hide();
$w(“#image10”).hide();
} else {
$w(“#image9”).show();
$w(“#image10”).show();
}
})
;

But it still doesn’t work. Appreciate any help.

Hi, You code looks ok.
My guess that image9 and image10 are disabled in the mobile editor.
Can you please share a link to your site and specify the name of the so we can inspect?
Roi.

main site is https://www.texasisrael.org and the page I’m having issues with is https://www.texasisrael.org/honoring-att