How do I hide a strip on desktop but show on mobile?

Ask the community
,
1

I want hide the strip on desktop with all elements inside the strip. I want the same strip(and elements) to remain visible on mobile.

2

Get a device’s form factor

import wixWindow from 'wix-window';

let formFactor = wixWindow.formFactor; // "Mobile"
3

I think I tried pasting this code in the developer mode. Including the code that highlights the elements by their name. I selected hidden ands tried collapsed in the settings. I’m not the most experienced in coding so I could never get the strip hidden and could only hide the text elements.

4

@kenny1654
Please show the faulty code, which you have been created.

5

@russian-dima
I am hoping to be able to get the full code for the above matter… i spent the last 2 days trying to figure this out…
i am novice, and just want to hide one slideshow from the desktop view and collapse the space left behind, but show it on the mobile. practically i am after the same function as the click on “eye” does on the zoomed out mobile view.

your help is most appreciated.

6

Let me try…

you will need something into this direction…

import wixWindow from'wix-window';

$w.onReady(()=>{
	let formFactor = wixWindow.formFactor; console.log(formFactor);
	
	if(formFactor==="Mobile") {start_mobileView();}
	else{start_desktopView();}
});

function start_mobileView() {
   //write here your functions for mobile view --> what should happen here now?
}


function start_desctopView() {
   //write here your functions for desktop view --> what should happen here now?
}

Here you will find some REFERENCES…

7

@russian-dima
thanks heaps for your reply and advice
I have used the below code and it did the hide on desktop and showed it on mobile, but on the desktop it showed the blank space (page) which was behind the hidden item. I have tried clicking the “hide” and “collapse” buttons, but made no difference, i am also getting 2 error messages when in preview.

Code used

import wixWindow from ‘wix-window’ ;

$w . onReady (()=>{
let formFactor = wixWindow . formFactor ; console . log ( formFactor );

if ( formFactor === "Mobile" ) {   $w ( "#slideshow2" ). show ();} 
**else** {   $w ( "#slideshow2" ). hide ();}

});

I have tried option
else { $w ( “#slideshow2” ).collapse();}

2 error messages:

  • Loading the code for the Home page. To debug this code, open mainPage.js in Developer Tools.
    Desktop line 4

when i click on line 4 it takes me back to the code and it puts the blinking courser between console and the full stop

  • Improve loading time by turning on caching for the Home page. Lear n more

i have also tried a different code
import wixWindow from ‘wix-window’;
$w.onReady(function () {
if(wixWindow.formFactor === “Mobile”){
$w(“#slideshhow2”).expand();
}
});

with this code i only get the below error and it still does not collapse the space behind the hidden item

  • Loading the code for the Home page. To debug this code, open mainPage.js in Developer Tools.

thanks heaps in advance

8

Ok —> i found the ORIGINAL-POST :grin:

9

The simplest answer is to drag the element over another element Right click hover over arrange and click on send to back, on the desktop