Adjust design of popup form on mobile

Store Design
,
1

Hello everyone,

I’m currently trying to adjust the design of the popup that appears on my website. That’s how the popup currently looks like:

Desktop

Bildschirmfoto 2024-06-28 um 11.23.49.png
Bildschirmfoto 2024-06-28 um 11.23.49.png2706×1422 269 KB

Mobile

PHOTO-2024-06-28-11-25-13.jpg
PHOTO-2024-06-28-11-25-13.jpg946×2048 108 KB

The idea was that the picture on the left side only appears when customers are visiting the website via desktop.

When they visit it on mobile it shouldn’t appear.

Does anybody know which code I have to add where so that the picture doesn’t show anymore on mobile?

My shop URL: https://mylongevitylife.com/

Thank you very much!

2

Hi @Lara14 ,

I checked and it was added by app?

Therefore, pure CSS instructions are not supported, you can only check your app’s settings or add JS code to it.

Do you have experience with code?

3

Hey @namphan

yes I added it with an app. And I also have experiences in coding.

Do you know which code I would need to add to make the picture not visible on the mobile popup?

Thanks!

4

Hi @Lara14 ,

Please go to Actions > Edit code > Assets > global.js file and paste this at the bottom of the file:

class popupCustom {
  constructor() {
    const checkPopupCustom = setInterval(() => {
      const element = document.querySelector("#app-embed-container-85724");
      if (element) {
        const style = document.createElement('style');
        style.innerHTML = '@media screen and (max-width: 768px) {section._formContainer_whyqz_30._grid_whyqz_145._left_whyqz_192{display:block}._gridItem_whyqz_169._imageLoaded_whyqz_234{display:none}';
        element.shadowRoot.appendChild(style);
        clearInterval(checkPopupCustom);
      }
    }, 10)
  }
}

new popupCustom();
5

Hi Napham,
I have the same problem as Lara14. I tried addding the code above but it does not seem to work.
My site is https://zircular.dk

Should I change something in the code?

Cheers,

Kurt

6

Hi @zircular ,

Please change code:

class popupCustom {
  constructor() {
    const checkPopupCustom = setInterval(() => {
      const element = document.querySelector("#app-embed-container-326993");
      if (element) {
        const style = document.createElement('style');
        style.innerHTML = '@media screen and (max-width: 768px) {
        section._formContainer_stahb_30._grid_stahb_148._right_stahb_204{display:block}._gridItem_stahb_172._imageLoaded_stahb_237{display:none}';
        element.shadowRoot.appendChild(style);
        clearInterval(checkPopupCustom);
      }
    }, 10)
  }
}

new popupCustom();