Show only on Mobile, Different Mobile design and content than Desktop

Good to Know #1

Make sure that 'hidden on load' is selected from the Properties Panel on all of the elements you want to hide on desktop, but show on Mobile.

 import wixWindow from 'wix-window';
 
 $w.onReady(function () {
  if(wixWindow.formFactor === "Mobile"){
  $w("#nameOfElement").show();
  }
 });
 

Good to Know #2

https://codequeen.wixsite.com/mobile-home-design

You will need to add design elements for Desktop and elements for Mobile on the same page.
  Then for the Mobile only elements you will make sure to set them as 'hidden on load' using the Properties Panel.

Then from the mobile editor, you will remove all of the desktop only elements by using the 'eye icon' to remove them from the mobile page.

Be sure to remove the 'hidden on load' from the Properties Panel on all of the mobile elements you want to display on mobile.

After you are finished placing the elements where you would like for them to appear you can publish or preview your end result.

Author

Stuck on a project? Hire Code Queen, LLC!

Schedule a phone call or video call directly online. In a different time zone? No problem! Code Queen currently has clients around the world.

Online Booking: Discovery Session

Contact Form: Send project details