Hi people, in the company where I work, we are using wix. We have a react application, in which we build the app and insert it into a wix iframe.
We have a problem with the mobile version. Its height changes depending on the content being displayed. therefore it is not displayed 100%.
Currently the mobile version is displayed when the screen is less than or equal to 768px. The application must not have a double vertical scroll, for this reason, the scroll was removed in the body of the react app.
what should be done in this case? this is the link of the app for testing: https://www.react-test.pinch.cleaning/
Hi there. You can use the Wix iframe API to communicate between your React application and the parent Wix page. Whenever the height of the content within your React app changes, you can use the Wix.setHeight() method to dynamically adjust the height of the iframe. This way, the iframe will resize to fit the content and prevent any overflow. I once had help with these proble ms( link ). Al so You can apply CSS techniques to ensure that the height of the iframe adapts to the content. One approach is to set the height of the iframe container to 100vh (100% of the viewport height) using CSS. This will make the iframe take up the entire height of the viewport, regardless of the content. I hope some of this will help you.
Additionally, you can set the CSS overflow-y property of the iframe container to scroll to enable vertical scrolling within the iframe container if necessary.