# Problem with Focus Item (Modal - Popup) on Mobile - is not fully loaded

**URL:** <https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282>\
**Category:** Mautic 5 Install/Upgrade Support\
**Created:** [March 15, 2025, 11:16am UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282 "2025-03-15T11:16:59Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kenzi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kenzi/32/13808_2.png) [@kenzi](https://forum.mautic.org/u/kenzi)\
**Post date:** [March 15, 2025, 11:16am UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/1 "2025-03-15T11:16:59Z")

</div>

**Your software**  
My Mautic version is:  
My PHP version is: 8.2

**Your problem**  
My problem is:  
I have created Focus Item → Modal (Popup) that contains just an clickable image. The problem is when I visit a page on mobile device - the popup doesnt fully load on page. It loads like it was set to 10px height, and sometimes when I scroll up it loads with full size.

Does anyone else had this problem before and fixed it?

Here is an example how the focus item displays when I visit the page on mobile:

 ![Zrzut ekranu 2025-03-15 121625](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/3/35bf470212c426427e5a610641df80b1fabf972c.png)

---

<div class="post-metadata">

**Author:** ![kenzi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kenzi/32/13808_2.png) [@kenzi](https://forum.mautic.org/u/kenzi)\
**Post date:** [March 15, 2025, 11:26am UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/2 "2025-03-15T11:26:52Z")

</div>

I see that there is an error in console:  
Uncaught TypeError: Cannot read properties of undefined (reading ‘style’)

and the problem is with this code:

```auto
            enableIframeResizer: function() {
                if (typeof Focus.iframeResizerEnabled !== 'undefined') {
                    return !0
                }
                Focus.iframeHeight = 0;
                Focus.iframeWidth = 0;
                Focus.iframeResizeInterval = setInterval(function() {
                    if (Focus.iframeHeight !== Focus.iframe.style.height) {
                        var useHeight = ((window.innerHeight < Focus.iframeFocus.offsetHeight) ? window.innerHeight : Focus.iframeFocus.offsetHeight);
                        useHeight += 10;
                        useHeight = useHeight + 'px';
                        if (Focus.debug) {
                            console.log('window inner height = ' + window.innerHeight);
                            console.log('iframe offset height = ' + Focus.iframeFocus.offsetHeight);
                            console.log('iframe height set to ' + useHeight)
                        }
                        Focus.iframe.style.height = useHeight;
                        Focus.iframeHeight = useHeight
                    }
                    if (Focus.iframeWidth !== Focus.iframe.style.width) {
                        if (Focus.debug) {
                            console.log('window inner width = ' + window.innerWidth);
                            console.log('iframe offset width = ' + Focus.iframeFocus.offsetWidth)
                        }
                        if (window.innerWidth < Focus.iframeFocus.offsetWidth) {
                            Focus.addClass(Focus.iframeFocus, 'mf-responsive');
                            Focus.addClass(Focus.iframe, 'mf-responsive');
                            Focus.iframe.style.width = window.innerWidth + 'px';
                            Focus.iframe.width = window.innerWidth;
                            if (Focus.debug)
                                console.log('iframe set to responsive width: ');
                        } else {
                            Focus.iframe.style.width = Focus.iframeFocus.offsetWidth + 'px';
                            Focus.iframe.width = Focus.iframeFocus.offsetWidth + 'px';
                            Focus.removeClass(Focus.iframeFocus, 'mf-responsive');
                            Focus.removeClass(Focus.iframe, 'mf-responsive');
                            if (Focus.debug)
                                console.log('iframe not a responsive width');
                        }
                        Focus.iframeWidth = Focus.iframe.style.width
                    }
                }, 35);
                Focus.iframeResizerEnabled = !0;
                return !0
            },

```

---

<div class="post-metadata">

**Author:** ![kenzi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kenzi/32/13808_2.png) [@kenzi](https://forum.mautic.org/u/kenzi)\
**Post date:** [March 15, 2025, 11:39am UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/3 "2025-03-15T11:39:50Z")

</div>

Because I cannot update my post, here is more details about this modal:

 ![-Mautic-03-15-2025_12_37_PM](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/4/40be0936b1025759cd1883e67c3c10b0617268ac.png)

```auto
<div style="object-fit: contain;object-position: center;">
    <a href="https://domain.com/dni-otwarte" target="_blank">
        <img style="max-width: 100%;display: block;" src="https://domain.com/media/images/popup/dzien-otwarty-post-OGOLNY-7.png" alt="Dni Otwarte" />
    </a>
</div>

```

and the styles:  
`.mf-modal{background:transparent;padding:0;border:0;}.mf-content{margin-bottom:0 !important;}.mf-modal-close{top:0 !important;right:0 !important;background:#fff;width:24px;}`

---

<div class="post-metadata">

**Author:** ![ricfreire](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ricfreire/32/14973_2.png) [@ricfreire](https://forum.mautic.org/u/ricfreire)\
**Post date:** [March 15, 2025, 12:12pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/4 "2025-03-15T12:12:32Z")

</div>

Hello @kenzi  
Whats your Mautic version? That’s **essential**.

---

<div class="post-metadata">

**Author:** ![kenzi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kenzi/32/13808_2.png) [@kenzi](https://forum.mautic.org/u/kenzi)\
**Post date:** [March 15, 2025, 12:35pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/5 "2025-03-15T12:35:32Z")

</div>

Hey hey, Mautic version - 5.1

---

<div class="post-metadata">

**Author:** ![ricfreire](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ricfreire/32/14973_2.png) [@ricfreire](https://forum.mautic.org/u/ricfreire)\
**Post date:** [March 15, 2025, 1:20pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/6 "2025-03-15T13:20:29Z")

</div>

Hello again,

The console error `Uncaught TypeError: Cannot read properties of undefined (reading 'style')` means that the script is trying to access the `style` property of an element that may not be properly defined or initialized. This could be caused by several factors, possibly related to your CMS:

- **CMS restrictions:** Check if your CMS is blocking external iframes or if a security plugin/tool is preventing external scripts from loading.
- **Plugin conflicts:** If your CMS has multiple plugins, try disabling them one by one to see if any are interfering with the Focus Item.
- **Script modifications:** Did you copy the script exactly as provided, or did you make any modifications? If so, ensure that no critical elements were removed or altered.

To further diagnose the issue:

- Instead of adding CSS under the “Custom CSS” section, try placing it directly within `<style>` tags inside the “HTML” section.
- Ensure that the Focus Item is **correctly** configured in Mautic.
- Test the Focus Item on a **clean test environment** (e.g., a simple HTML page **or** Clean CMS or security/tools plugins) to see if the issue continues.

Hope this helps. Let me know if it works.  
Best regards,  
Ricardo

---

<div class="post-metadata">

**Author:** ![kenzi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kenzi/32/13808_2.png) [@kenzi](https://forum.mautic.org/u/kenzi)\
**Post date:** [March 15, 2025, 1:59pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/7 "2025-03-15T13:59:03Z")

</div>

This is the same message that AI responded to my question ;(

---

<div class="post-metadata">

**Author:** ![ricfreire](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ricfreire/32/14973_2.png) [@ricfreire](https://forum.mautic.org/u/ricfreire)\
**Post date:** [March 15, 2025, 5:11pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/8 "2025-03-15T17:11:46Z")

</div>

1. AI has limited knowledge regarding Mautic and its tools, as not everything is documented. What you’re saying is categorically false.
2. If you believe my response was AI-generated, feel free to ask AI the same question and compare the results. This will only confirm my point.
3. Have you actually tested the solutions I suggested, or are you relying on AI to magically solve everything for you? Troubleshooting requires effort.
4. When someone takes time - especially on a weekend - to help you, a more respectful and appreciative attitude would be expected. The community thrives on mutual respect.
5. If you’re not interested in genuine help, I wont waste my time further.

---

<div class="post-metadata">

**Author:** ![kenzi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/kenzi/32/13808_2.png) [@kenzi](https://forum.mautic.org/u/kenzi)\
**Post date:** [March 15, 2025, 7:08pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/9 "2025-03-15T19:08:33Z")

</div>

No no no, sorry mate. If you misconstrue my tone. I apologize. I didn’t mean to offend you. I was just saying that AI also gave mi similar answer as you did.

The problem is that this image is widther than the original focus modal item in Mautic. For example below is an example without any custom CSS code:

 ![-Mautic-03-15-2025_08_03_PM](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/e/eb48224af7795647ba5a78e18eb41dfd5041a9bb.png)  
 ![-Mautic-03-15-2025_08_04_PM](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/1/1ff830d2ddf9e77092b8823701c67399ecbae5e2.png)

and it also doesnt fully load on mobile. It also generates the error as above.

I have also tried to add custom code CSS into style statements - didnt help.

the problem is with this line of code:  
if (Focus.iframeHeight !== Focus.iframe.style.height) {

so it cannot calculate the height of the popup iframe - which is simple image.

---

<div class="post-metadata">

**Author:** ![ricfreire](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ricfreire/32/14973_2.png) [@ricfreire](https://forum.mautic.org/u/ricfreire)\
**Post date:** [March 17, 2025, 9:44pm UTC](https://forum.mautic.org/t/problem-with-focus-item-modal-popup-on-mobile-is-not-fully-loaded/35282/10 "2025-03-17T21:44:57Z")

</div>

Hello @kenzi,

I apologize for misinterpreting your message earlier. Regarding your situation, there’s actually a straightforward solution since you’re familiar with CSS and HTML.

I recommend editing the image to remove the text and logo while keeping the visual elements. Then apply it as a background for the focus item in Mautic. You can add the text directly within Mautic, utilizing custom fonts by calling them with HTML, and incorporate the logo next image - always respecting the iFrame size.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/1/13649ce66057f6fb89f9fa1f08d8a6f530eedb07.jpeg)

I’ve implemented a similar approach previously and it worked flawlessly.

Best regards,  
Ricardo