Issue with making iFrame on Page Full Width and mobile friendly

[anthonyNYCFPOK]

I used an iframe to embed this 3D configurator on a page. I'd like it to be more user-friendly and make it full width and with a better height on desktop and also with the good usability on mobile screens.

https://nycfireplaceshop.com/pages/pergola-3d-configurator

[TheScriptFlow]

May I know are you using any app of Shopify Section for it?

[anthonyNYCFPOK]

No, I just simply added a new page and created a new template through my theme editor. I can directly edit the CSS specific to this page template through the theme editor.

[TheScriptFlow]

Most likely that iframe added through a section. Could you please click on theme section and on the right side there will be option to Make it's width 100%.

[anthonyNYCFPOK]

If I do it through the section, then I will need the proper code so that it resizes properly to fit all screens. Turning on section full width through my theme editor does nothing <iframe src="https://buildown.shop/allproducts/nycfireplaces.com/en" height="2000" width="1000" title="Pergola 3D Configurator"></iframe> 

[TheScriptFlow]

Could you please try this code instead?

<iframe src="https://buildown.shop/allproducts/nycfireplaces.com/en" height="2000" width="100%" title="Pergola 3D Configurator"></iframe> 

[anthonyNYCFPOK]

After clicking into one of the products on the configurator, the left side bar Dimensions for exact, the bottom buttons for next are cut-off now after applying your code.