All headlines on my website mintblue.com have responsive text classes assigned to them. After the update they stopped working and now the headlines are way too big for mobile devices.
Please advise on how to solve this,
Thanks
Hey Niels,
Thanks for writing in! I have checked the page and there are JS errors. This could be the cause why the responsive text is not working.
[Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113
decorators.js:51
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "lottie-player" has already been used with this registry
at legacyCustomElement (https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js:148:55)
at https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js:148:240
at __decorate (https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js:15:1398)
at https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js:180:270321
at https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js:1:140
at https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js:1:217
legacyCustomElement @ decorators.js:51
(anonymous) @ decorators.js:91
__decorate @ tslib.es6.js:58
(anonymous) @ lottie-player.ts:206
(anonymous) @ lottie-player.js:1
(anonymous) @ lottie-player.js:1
cs.bb9cc16.js:1
Failed to attach handler to element <span id="x-responsive-text-2" data-x-element-responsive-text="{"selector":".responsive-h2","compression":"1.1","minFontSize":"40px","maxFontSize":"72px"}"></span> (e,{selector:t,compression:n,minFontSize:o,maxFontSize:i})=>{t&&Array.from(document.querySelectorAll(t)).forEach((e=>bs(e,{c:n,min:o,max:i})))} {selector: '.responsive-h2', compression: '1.1', minFontSize: '40px', maxFontSize: '72px'} ReferenceError: clamp is not defined
at cs.bb9cc16.js:1
at fe (cs.bb9cc16.js:1)
at Te (cs.bb9cc16.js:1)
at cs.bb9cc16.js:1
at Array.forEach (<anonymous>)
at cs.bb9cc16.js:1
at xt (cs.bb9cc16.js:1)
at cs.bb9cc16.js:1
at Array.forEach (<anonymous>)
at cs.bb9cc16.js:1
xt @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
yt @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
cs.bb9cc16.js:1
Failed to attach handler to element <span id="x-responsive-text-3" data-x-element-responsive-text="{"selector":".responsive-h3","compression":"1.1","minFontSize":"36px","maxFontSize":"56px"}"></span> (e,{selector:t,compression:n,minFontSize:o,maxFontSize:i})=>{t&&Array.from(document.querySelectorAll(t)).forEach((e=>bs(e,{c:n,min:o,max:i})))} {selector: '.responsive-h3', compression: '1.1', minFontSize: '36px', maxFontSize: '56px'} ReferenceError: clamp is not defined
at cs.bb9cc16.js:1
at fe (cs.bb9cc16.js:1)
at Te (cs.bb9cc16.js:1)
at cs.bb9cc16.js:1
at Array.forEach (<anonymous>)
at cs.bb9cc16.js:1
at xt (cs.bb9cc16.js:1)
at cs.bb9cc16.js:1
at Array.forEach (<anonymous>)
at cs.bb9cc16.js:1
xt @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
yt @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
cs.bb9cc16.js:1
Failed to attach handler to element <span id="x-responsive-text-7" data-x-element-responsive-text="{"selector":".responsive-button","compression":"1","minFontSize":"24px","maxFontSize":"96px"}"></span> (e,{selector:t,compression:n,minFontSize:o,maxFontSize:i})=>{t&&Array.from(document.querySelectorAll(t)).forEach((e=>bs(e,{c:n,min:o,max:i})))} {selector: '.responsive-button', compression: '1', minFontSize: '24px', maxFontSize: '96px'} ReferenceError: clamp is not defined
at cs.bb9cc16.js:1
at fe (cs.bb9cc16.js:1)
at Te (cs.bb9cc16.js:1)
at cs.bb9cc16.js:1
at Array.forEach (<anonymous>)
at cs.bb9cc16.js:1
at xt (cs.bb9cc16.js:1)
at cs.bb9cc16.js:1
at Array.forEach (<anonymous>)
at cs.bb9cc16.js:1
xt @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
yt @ cs.bb9cc16.js:1
(anonymous) @ cs.bb9cc16.js:1
It could also be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):
- Testing For Theme Related Issue
- Testing For Plugin Conflict
- Child Theme
- Disabling Cache
- Disabling Cdn
- Version Compatibility
If after trying all of the above things you are still experiencing problems, please reply below, including login details to your site in a secure note, so that we can investigate further. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
To know how to create a secure note, please check this out: How The Forum Works
Best Regards.
Thank you for your swift reply! I have tried the tests but can’t get it to work. Added login creds to the initial comment. I hereby confirm you can make changes to the website. Thank you!
Hi Niels,
I have checked your website and found the same issue pointed out by my colleague. It seems that you are using the Lottie animation file using which is the reason behind the JavaScript console error. I would suggest you remove code one and check if that resolves your actual issue or not. If that does not resolve, please re-share the login credentials as the current one is not working.
Thanks
Excuse me! I updated the credentials and they work now.
I took out all the lottie scripts to see if that works, but the problem still persists.
Hopefully, you can enter the site now and have a look.
Thank you for your time and patience,
I have the same issue.
Responsive text has been broken since updating to version 5.1 and remains broken on 5.1.3
Hi Niels,
I have checked the Headlines of your website and found that the different font size has been set only for the few. Whereas the rest of the Headline is set the same font size for every screen size, that might be the reason behind your issue. I would suggest you adjust the size accordingly to every Headline element.
Hope it helps.
Thanks
Yes this is fixed just by not using the responsive text feature anymore. The animations are not fixed yet. Still laggy and glitch. See my other thread. Thank you for your help!
Hi everyone, I can confirm there was a regression related to responsive text. It has been corrected for the next release which we will publish this afternoon.
Awesome, thanks for the fix!
You’re welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.