Streaming live at 10am (PST)

Help: Adapting embedded Javascript for mobile/tablet


#1

Hi

I have a problem with the embed component.

I embedded a javascript to show an interactive study from another website. The Javascript was provided by that website.

Problem: The study ist about 800px wide, which doesnt work with mobile, so on mobile it will only show a part of the study, and you have to scroll around inside the element to see the rest. To show the full study (obviously it would be hard to read, but its better than showing only a part of it), i set the width of the element to 804px, which shows the full study, but you need to zoom out of the page to see everything (so instead of scrolling within the element the study is set in, you have to zoom out of the whole page). Than, i added "" to the javascript, which forces it to display the full widht. But now, since its too wide for mobile, it just shows the desktop-view on mobile devices, which means the other elements above und below the study are hard too read. I tried several settings to "shrink" the study on mobile, but it just cuts part of it off when i lower the width (no matter whether i use px, percentage or VH/VW to define the width/height).

Goal: I would like the full study to show in mobile, without it being cut off or having to scroll within the element, with the other elements working as intended on mobile. Basically, the study needs to be smaller, so it fits the screen.

I would prefer to solve this with the settings webflow offers, but i would also take additional code to modify the Javascript


#2