Set iframe width to fit the width of screen

Highlighted
New Member
1 0 0

I would like to include an iframe into a page of my website. From the home page, the user would click on a menu item "Dashboard", and be taken to a page with an iframe containing a dashboard I created using RShiny. I have managed to put the dashboard in an iframe on the page that I want, but I don't like how it appears. The HTML code that I used is the following:

<iframe src="https://firdaleconsulting.shinyapps.io/NGO_dashboard/" width="100%" height="1050" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

Currently, the page's parent container div prevents the iframe from spreading across the full screen of the device its being viewed on. Setting the width parameter to 100% only results in the iframe spreading across the entire container div. How do I get the iframe outside of this container div?

I have used this forum question for guidance but unfortunately I haven't been able to solve my issue yet: https://community.shopify.com/c/Shopify-Design/Trying-to-embed-iframe-code-within-a-window-in-our-si... . Unfortunately my HTML and CSS knowledge is rudimentary so step by step guidance would be greatly appreciated. Thanks!

0 Likes
Highlighted
Shopify Partner
190 38 39

@MeganLittle 
Please provide your store URL to have a look into your store

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
0 Likes