Showing element on mobile only - not working

Ask the community
,
1

Hoping to get some help - I have followed the instructions here Velo Tutorial: Displaying Elements in Mobile Only | Help Center | Wix.com
and the element is still not showing on my mobile site. I have tried various options, from adding all element codes into the code, to just the main “repeater1” and nothing seems to work.

Any advise would be appreciated!

1610×478 58.9 KB

2

Hi Charlotte:

Here are a couple of thoughts but to be definitive you will need to share the URL of your site page.

Have you checked that the elements are not obscured by the repeater? Obviously if they aren’t then there is another issue.

To check for overlapping elements you need to enable the toolbar (see image below).

Sometimes the mobile settings for the page will try to optimize things by hiding elements automatically in mobile view. Have you checked that the elements are visible in mobile view?

Take a look at this article to see if it helps:

As I said above if these don’t help then if you can share the url it will help the community trace the problem.

Steve

3

800×604 51.8 KB

4

Hi Steve - thank you so much. I can see there are overlapping elements, however not sure what i’m meant to do now? the URL is lottesocial.com and I have attached images of what i can see in layers and overlapping items, however nothing is hidden

1660×1172 194 KB

5

Hi Charlotte:

OK Your primary problem is that you have the repeater both hidden AND collapsed. To show the repeater you need to show() AND expand() the repeater.

416×608 37.1 KB

Also since the container, and text elements are a part of the repeater you don’t need to do anything with these elements. The container is correctly inside of the repeater (on top of it) and so when the repeater is hidden it will also be hidden and when the repeater is shown, it too will be shown. Just make sure that $w(‘#container1’), $w(‘#text15’), $w(‘#text16’) are not hidden and not collapsed on load.

Your code should then look like this:

import wixWindow from 'wix-window';

$w.onReady(() => {
    if (wixWindow.formFactor === "Mobile") {
        $w('#repeater1').show();
    }
});

Hope this does the trick!

Steve

6

Thanks Steve - I had tried that, but then on my desktop site, I have a massive white gap where the repeater is hidden… any idea how to remove this?

7

Hi @charlotte36498 !

This article might be helpful in this case.

Doron.

8

@charlotte36498 Yes so what you really need to do is not use the hidden capability you need to use the collapse and expand capability. They both have similar effects the difference being that collapse() essentially removes the white space that would be occupied by a hidden element, expand() essentially expands to show the content in the element.

So you need to un-click “Hidden on load” check box in the repeater Properties and check “Collapsed on load”.

Then your code should look like this:

import wixWindow from 'wix-window';

$w.onReady(() => {
    if (wixWindow.formFactor === "Mobile") { 
        $w('#repeater1').expand();
    }
});

Here are the document references:

  • Show & Hide

  • Collapse & Expand

Cheers

9

@stevendc Amazing - thank you so much! that worked :slight_smile: :slight_smile: