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