Jump to content

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

Recommended Posts

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.




Edited by Velovelo
Clarifying Template Version
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

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?

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
  • Velovelo changed the title to Is it possible to target the css within an iFrame - mobile rendering issue (Brine 7.0 Template)?

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?





Edited by Velovelo
tag forum member
Link to comment


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.







iPhone X-2.PNG


Edited by Velovelo
Link to comment
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.