"Show only in mobile" code not working

Ask the community
,
1

I used the code and instructions from here: Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com

First element works perfectly, with it not showing on desktop and showing on mobile. The second element, though, is hidden on desktop and also won’t show up on mobile.

The code currently looks like this:

920×236 21.2 KB

Please advise!

2

Hi,

did you try to drop the word ‘debugger;’ between lines 4 and 5 to see the context and if the condition is true?

Shlomi

3

I dropped it as you said, but no good. The second element “#faqWidget1” still isn’t showing up.

1263×229 27.3 KB

I also tried changing out the second ID with other ones to see if the FAQ widget was the problem, and none of the ID’s I used worked.

4

Hi,

Actually, i meant 4 and 5 in the previous setup, meaning under the $w.on ready and above the if condition. Enable the chrome dev tools and you should be within the right context

Shlomi

5

Did I do it right this time? Nothing looks different…

805×205 18.9 KB

6

yes, now when in chrome dev tools in that breakpoint using the console you look into wixWindow.formFactor what do you see?

7

Is this what you’re referring to? F12 on Chrome?

8

Yes, using the word debugger, just during development will pause you there while this view is open

9

??? What am I doing next?

10

Actually we are doing web debugging 101, i am sure you’ll find a lot of info on the web. it is not specific to wix code but any javascript debugging .
i am trying to guide you to debug the conditions and variables step by step so you can learn more about your program and how to adjust it.
go to tab - sources and you’ll see the program execution halts on the debugger keyword (remove it when done), then on the right side you can go step by step, each time evaluate your variables and conditions - type them in console and look into their value

1396×666 142 KB

btw, what is the url of the site you are trying to build?

good luck,
Shlomi