Mobile Layout Troubles With Embed Widget

Design help General
1

hello!

well I think I built my first page with webflow. I am just an intermediate Muse user who like to build his own stuff and not rely on designers all the tiime.

http://nicks-awesome-project-a10bc7.webflow.io/

my home page looks pretty much how I want it but these two html block that have some java script are really messing up my mobile layouts. Can you tell me where I am going wrong? Do I need to size the exact size of the object in the html embed widget? Should I put it in a different section? I really need some help here.

thanks,

Nick

2

As your iframe has a fixed width set in code, simply add this style to override it:

<style>iframe { max-width: 100% !important; }</style>

then, remove the huge 110px padding left so that it gets more space.

3

thanks for the reply Sam! I removed the 110 padding. Because I am not much of a coder (none really) should I just add the line of code you recommended to line 2 in the custom html block or do I need to place it somewhere in the original code snipet. Here is the original code snipet. ( I removed the front and end brackets so the code would show up here)

script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c175396f6' data-opf-params='borderColor=#000000&borderSize=0px&embed=true&formHeight=325&formWidth=40%&popPosition=mc&instance=1915483348'></script

thank you!

4

You could simply append into the same embed block, or paste it in the Page-level Header Code section in page settings.