Enable / Disable on Mobile / Tablet / Desktop

Ask the Community General Questions
1

It would be nice to be able to enable or disable the slider on desktop, mobile and tablet. The other thing would be to be able to maintain the original slideshow aspect ratio - right now it gets cropped on mobile and looks completely wonky.

1 Like
3

Hi there, @Aviad_Stark :wave:

Glad to say that it’s possible to hide the widget on mobile and desktop devices.

Hide on mobile:

@media (max-width: 450px) {
.elfsight-app-WIDGET_ID {
display: none !important;
}
}

Hide on desktop:

@media (min-width: 768px) {
.elfsight-app-WIDGET_ID {
display: none !important;
}

}

In both codes, you need to replace WIDGET_ID with the ID of your widget and add the code to the Custom CSS section of your widget settings:

As for hiding specifically on the tablet, I’ll discuss it with the devs and will update you tomorrow :slightly_smiling_face:


Regarding the image cropping on mobile, please use this code in the Custom CSS field on the Advanced tab of your widget’s settings and let me know if it helped:

@media (max-width: 768px) {
.eapp-slider-background-component {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 115% !important;
}
.eapp-slider-slider-slider {
height: 480px !important;
}
}
@media (max-width: 480px) {
.eapp-slider-slider-slider {
height: 230px !important;
}
}
4

Thanks Max - quick question since I am a novice… where do I get the widget ID?

1 Like
5

This article explains how you can find it :slightly_smiling_face:

6

Hi, @Aviad_Stark :wave:

And here is the code to hide your slider on tablets only:

const script = document.createElement('script');
script.src = 'https://unpkg.com/current-device/umd/current-device.min.js';
document.head.append(script);

const waitForElement = () => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = typeof device !== 'undefined';

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 1000);
      i++;
    }
  };

  check();
});

waitForElement()
.then(() => {
  if (device.tablet()) {
    document.querySelector('.elfsight-app-354b291e-91c5-4e56-abc9-b234e0ec7840').style.display = 'none';
  }
});

This code should be added to the Custom JS field on the Advanced tab of your widget’s settings :slightly_smiling_face: