Good to Know #1
The Code
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
Without Code
Live Site:
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
by Code Queen
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