Javascript broken in Twenty Twenty One

  • Hi, I’m using the Twenty Twenty One template and would like to insert Javascript code from an external system to display the form on the website. The form displays fine on a desktop PC and tablet, but not on a mobile phone, where the form is cut off from the bottom and cannot be viewed in its entirety. Could you help me with that? I don’t want to change the layout of the whole website because of one javascript code… no…

    Here it is OK on desktop – https://ibb.co/7yFNTRM
    Here is broken view on mobile phone – https://ibb.co/MfF361J
    (no checkmarks and final button)

    Thank you. Vladimír.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Without a link to the site, it is difficult to help you. If you don’t want to share it, contact the support of the service provider who provides you with the form script. Ultimately, it is their styles that are decisive here.

    Thread Starter Samuel222

    (@samuel222)

    Hi, thank you.

    You can see the problem here – https://www.orientalnimedicina.cz/aa/

    The content of the entire pages (starting with Objednávka as headline up to the form) is integrated from an external page via iframe. This external page, called simpleshop.cz, is responsible for any display. The WordPress theme cannot influence this. You must therefore contact the support of the website whose content you are embedding here.

    Thread Starter Samuel222

    (@samuel222)

    OK, i did this, awaiting response. But when I tried to use this form (script) on my other website with difference WordPress template, form was displayed correctly.

    Thread Starter Samuel222

    (@samuel222)

    I was discussing about this problem with support and they told me, that javascript code is OK and the bug with displaying form on mobile phone is in template. ??

    Mobile I can see the form without any problems – but it seems to be cut off above a certain height. I assume this is what you mean? The reason is that the iframe is set to a maximum height. This in turn is caused by the JavaScript function twentytwentyoneResponsiveEmbeds() included in the theme and apparently not set on every mobile device. You could override what this function does with the following CSS:

    body iframe { max-height: 100% !important; }
    Thread Starter Samuel222

    (@samuel222)

    Thank you very much. It works great!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Javascript broken in Twenty Twenty One’ is closed to new replies.