Is it possible to target the css within an iFrame - mobile rendering issue (Brine 7.0 Template)?

Site URL: https://www.cleanplate.co.nz/e-cookbook

Hi There, 

I am working on a page for a client where we have embedded and externally hosted PDF Flip eBook into an iframe.

I have noticed that while on desktop, everything looks fine, but on mobile, the ui controls gets trimmed off at either side in spite of the overall width of the iframe being set at 100%.

The classes I want to target are (I think):

.pdff-ui-wrapper .pdff-ui-controls  with of width of 99% for mobile or suchlike

But using the CSS editor within Squarespace, it doesn't recognize the classes as they are not 'native' to the project.

Does anyone know of a quick fix for this or another way apart from how I have added the iframe?  I have looked online and am a bit confused.

Best regards.

An iFrame runs in its own "sandbox". You cannot apply CSS to it from the Squarespace website. If the service that you have iframed (a PDF Flip eBook service) then the CSS will carry through. However, if you have no access to CSS on the third party service, then there's nothing you can do with CSS.

Regarding the responsive issue, does the third party service respond (scale) correctly when you access it directly from mobile, instead of through the iFrame?

Hi, Yes @paul2009 the  third party service does respond (scale) correctly when I access it directly from mobile.

I have since read that CSS in an iframe can be targeted via Javascript.  Is it poss to add Javascript via Version 7.0?

Thanks

Hello,

I have come to my own conclusion here.  I don't think that I will get any success if I did try to edit the CSS via Javascript to make the toolbar responsive, as what I have found by using the Chrome inspector mobile viewpoint width emulator, is that PDF Flip is not completely mobile-friendly.  This is with using the PDF Flip not in an iframe, as well as within an iframe

The book itself is responsive, but the toolbar below it is not.  Even on PDF Flip's own "serving suggestions" the toolbar screws up depending on the width.  The examples I have attached are from PDF Flip's own website.  You can see for yourself that is is not great.

I have reached out to the via their support portal - but I don't expect to get much help.  I have found their support to be not that great.  With the time zone difference between NZ and what I am guessing is Russia, the turn around for a response via email is annoying.  If I don't get the detail I need then it is another 24 hours before I get a response.  I have tried to get on a call with them so I can make sure all of my questions get answered, but - they don't do calls, only offer support via email.  My client has emailed PDF Flip to ask them about their refund policy, but they haven't responded.

I haven't had a response from PDF Flip as to why the toolbar isn't responsive - no surprises there. 

In terms of what PDF Flip says it does on the box - it's performance responsively doesn't stack up.