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

Updated: Sep 15, 2020



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:

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

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

185 views0 comments

disclaimer

a quick note about our website content

Our free and premium content is non-exclusive, meaning you are not the only one with access to the content. You can customize our content to fit your end product. Redistribution of our content is strictly prohibited. This means you cannot make our content available to others as-is, stand-alone products or stock products in ANY LANGUAGE, regardless if you offer our content for free or not.