I’m trying to embed an online catalogue on one of my websites and used the Freestack R iFrame. I set the iFrame height to 1000px but when I publish and view the page it appears in a very small frame which crops the majority of the content and shows no scrolling bars. If I look at the page source it shows the height and width as 100%.
Not sure how I can fix this? Any help appreciated.
Hi Dearth,
On the FreeStack R iFrame stack, the width is set by default at 100%, i.e. the iFrame itself will span the width of the container div it is within and/or the width of the screen on the device the site page is being viewed on.
The FreeStack R iFrame height is set using the stack’s iFrame Height hud control.
The FreeStack R iFrame’s scrollbars can be set to be hidden or displayed using the stacks Set Scrollbars Display hud control options.
Keep in mind that the iFrame’s responsive display styling is for the iFrame itself. No iFrame can make any remote page content be responsive that’s called and displayed within it, if it’s not styled that way to begin with. The remote page content’s responsive display styling is controlled by whatever css styling is set for that page in the remote page’s css style sheet(s). If the remote page is NOT styled to display in a responsive manner then only a portion of the page will be displayed when viewed on mobile device screens smaller than the width of the remote page content. If the remote page is styled to display in a responsive manner than that remote page’s content should scale down and reposition its page elements to fit within the iFrame area.
My suggestion is to view the original catalog web site page on a mobile device to see how it displays to determine if it is styled to be responsive or not. if it’s not, then you need to set the scrollbars to show so they can be used on mobile devices to access all the non-responsive catalog page’s content using the iFrame’s scrollbars as needed.
Hope that answers your question and helps you out.
Best,
Charlie
Hi Charlie, I am using the stack’s iFrame Height hud control to set it to 1000px but i still get a very small frame. I appreciate that the content of the frame won’t behave responsively but this is a compromise the customer is going to have to accept as they have no control over the code on the external catalogue.
Here’s a link to the page (still under development so forgive any rough edges!);
Hi Dearth,
Can you please email me direct on this issue at themesupport@blueballdesign.com so I can help you out on this. Once you do that I can get this resolved for you. I don’t check the forums very often now so it will be faster to resolve this if you contact me directly.
Best,
Charlie
Hi Dearth,
Ok it looks like you are using an old version of the FreeStack R iFrame stack that is version 2.0 or earlier possibly. The issue I think you are referring to was fixed on the FreeStack R iFrame stack in the FreeStack Responsive v2.1 update back in June 2014.
Again, if you will email me direct I will be happy to help you out on this. The current FreeStack Responsive theme and stacks version is 2.3.
Best,
Charlie
Thanks Charlie, I thought I had updated the theme and stacks when you sent me the email about it back in 2014 but obviously I didn’t! Have installed the latest version and all working fine now. Thanks for the help!