Multi-State Box: Hide a Certain State on Mobile View

Ask the community
,
1

I would like to hide state 2 in the mobile view only. For some reason, state looks OK, but state 2 is out of proportions, and basically there is no justification to show in on mobile. On the desktop version its nice since the user can hover with the mouse on the elements and see the colors change.

Is there any way to hide states or show only 1 state or disable hover function on mobile only?
Thanks in advance :slight_smile:

1134×709 59.1 KB

360×709 42.2 KB

2

The question is not clear (I don’t see a state box on the images you posted).
If you want to skip from state 1 to state 2 you can do it using code:
https://www.wix.com/corvid/reference/$w/multistatebox/changestate

3

Hey J.D thanks for the quick response. The images I attached are in preview mode. I’m attaching an editor view here. I would like to HIDE state 2 on mobile version only (since it looks bad + there is no use for it on mobile)

319×568 31.1 KB

4

@royvalaryola this is unclear. do you have many multi-state boxes on the page and you wish to skip one state in one of the multistate boxes (on mobile)?

5

Sorry about that I don’t know how to explain this better.
Yes I have 7 multi state boxes, each one has 2 states. I would like to show on mobile only state 1. I don’t want to show state 2 (on mobile only)

6

@jonatandor35 Here is a video of the current situation. Once the user clicks an item, it changes to state 2. I want to hide state 2 on mobile

7

You can set it so changing slide will be done by code only and limit it to desktop and tablets only.
Something like:

import wixWindow from "wix-window";//this line at the top of the page code
$w.onReady(() => {
    if(wixWindow.formFactor !== "Mobile"){
        $w("#multiStateBox1").onClick(()=> {
            $w("#multiStateBox1").changeState("state2");
        })
    }
})
8

It worked! Thanks a lot! :grinning: