App too small on Shopify page with width=100%

With the setting under Design > App Size > App Width: 100% you can make an App take up the full width of the HTML container in which it was was placed on your site.

For example, if you place an App with width=100% in a sidebar with a width of 300px, your App will be 300px wide. If you place the App in a main content area with a width of 100%, your App will take up the full width of the screen. 

The following screenshots show:

1. Form Builder with App Width set to 100% and parent div on page set to 300px
2. Form Builder with App Width set to 100% and parent div on page set to 100%

Changing width of page container

Apps live inside their own div container and they can never be wider than their parent div. If your theme is using a narrow content area but you'd like to make the App go full-width, you will need to override the CSS of your theme's content area. Your theme developer is the best person to talk to for help with this. 

Some themes also come with different page templates, in which case you might be able to choose between using a blog layout or a full-width layout for a page on your site. If available, this option appears in the Template dropdown in your Page editor.

Choose a template with full-width in the name to make that page use a full-width layout.

Overriding default styles of iframe (Page Studio)

Some themes may have CSS defined for iframes. Specifically, if you are using the Page Studio app, you will already have styles defined for all iframes on your site. Because POWR Apps load inside an iframe, the CSS defined for iframes will be applied to your POWR App. 

The best solution in this case is to modify your CSS stylesheet in which the iframe design is defined. Be careful if you have other iframes on your site that should not be affected by the change. You will want to define CSS for each iframe on your site individually.

The other option is to add a line of jQuery to your page or theme file that overrides the default iframe style after page load:

setTimeout(function(){$('.powrLoaded iframe').css('width', '100%')}, 1000)