Wix Websites: Hide elements on desktop, show on mobile


First, Make sure your Developer Tools are checked On (under Tools > Developer Tools > Check on: Properties Panel and Hidden Elements). See screenshot:

Then, select the item you want to hide on desktop and show on mobile. Check on "Hidden on load":

To hide items on Desktop, but then show them on mobile, insert this code into the Page Code panel (expand the Page Code at the bottom of your screen):

Here is the code – just swap out "your_second_element's_ID" with the name of your element or group.

import wixWindow from 'wix-window';

$w.onReady(function () {

if(wixWindow.formFactor === "Mobile"){

$w("#your_first_element's_ID").show();

$w("#your_second_element's_ID").show();

}

});

You can also see more detailed instructions on Wix's support forum:

https://support.wix.com/en/article/how-to-use-wix-code-to-display-elements-in-mobile-only


As a website designer and graphic designer, I love sharing great tips and tools that make designing easier. As part of my website design services, I train clients on how to update their websites or to do their own SEO (search engine optimization), so I post many of these tips for my clients to train them how to use Wix and other tools to keep their website up-to-date. Keeping websites current is the best way to get found and to keep people coming back to your website. 
 

Check out all my Design & SEO tips and resources in my blog

Reach out with questions or for a free design estimate:

© 2020 Pickle-Wix Web Design located in Denver, Colorado