Upfront Widget Mobile Display Only

Greetings,
I was wondering if it's possible to display a widget element (or text element) only on Mobile/Responsive versions of the page as well as a widget not being displayed on mobile/responsive and only on desktop.

For example, two widgets elements. One that shows up on mobile/responsive screens and one that displays only on the desktop/larger screens.

I'm looking to do this on http://ammaroots.com/categories/

Support access is granted if you'd like to take a look!

Much Love,
Ciro Bey

  • Dimitris
    • Support Star

    Hey there Ciro Bey,

    hope you're doing good and thanks for reaching us! :slight_smile:

    a widget not being displayed on mobile/responsive and only on desktop.

    This should be pretty easy:
    1. Create the widget you want for desktop
    2. Enter the "responsive" mode

    3. Select the tablet or mobile view and use the "eye" button on the top right corner of the element in order to hide it

    display a widget element (or text element) only on Mobile/Responsive versions of the page

    For that you should use some CSS sauce as there isn't any option in UF as is. The workaround should be:
    1. Create the widget in desktop view
    2. Find the appropriate wrapper ID of the element, in my test case is "wrapper-1480241844157-1030". You may have to use Chrome Dev Tools for that.

    3. Open "Global Theme CSS" to enter something like

    .desktop-breakpoint #module-1480241120508-1906 { display: none; }
    .tablet-breakpoint #module-1480241120508-1906 { display: block; }
    .mobile-breakpoint #module-1480241120508-1906 { display: block; }

    Keep in mind that the ID number has to be changed. The "display:block" rules in this case aren't necessary, I just shared them to see the corresponding breakpoint classes. :wink:

    Warm regards,
    Dimitris

  • Ciro Bey
    • WordPress Warrior

    Hey there Dimitris

    I think I'm pretty close. I used this code:

    /* Hide Mobile Grid(s) Desktop */
    .desktop-breakpoint #module-1480237172304-1508 {
      display: none;
    }

    Though, I'm not sure if I grabbed the right ID. The problem is that when I go into developer tools mode/inspect, only one of the widgets shows up and not both of them.

    On the desktop version, the correct one (top) is displayed. And on the mobile/responsive version the correct one is displayed as well, except that no items are showing up for the plugin. I'm wondering if I got the wrong ID or there is some other kind of conflict with the code.

    Thank you for the support with this, very appreciative!

    Much Love,
    Ciro Bey

  • Ciro Bey
    • WordPress Warrior

    Hey there Adam Czajczyk

    Yes, in the screenshot I'm looking to have #1 visible on the desktop/larger screens only and #2 visible on mobile/responsive modes only. I have achieved this somewhat, although like I mentioned before, the responsive one (#2) isn't displaying the items for the plugin now.

    Much Love,
    Ciro Bey

  • Adam Czajczyk
    • Support Gorilla

    Hello Ciro Bey!

    Thank you for this additional explanation.

    Could you please check the site again (you may need to clear browser cache first though)? It seems that the element size in mobile view was too small and the grid was simply "hidden". I have made the element taller in mobile and tablet view and it seems to be working now.

    Best regards,
    Adam

  • Dimitris
    • Support Star

    Hey there Ciro Bey,

    hope you're doing good today! :slight_smile:

    As this post is pretty old, I don't think that Adam will recall what were the exact steps followed here.

    Could you please elaborate a bit more on this with me?

    Which is the page in question and what are you trying to accomplish exactly?

    Please advise! :slight_smile:

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.