Help resizing iFrames for mobile

Site URL: https://plantain-icosahedron-rn87.squarespace.com/config/design

Hey -

Please could someone help me resize the iframes I have embedded on this site? There are numerous iframes and they show fine on desktop but way too long lengthways on mobile. Cannot seem to find the right code anywhere!!

Thank you!

Your site is set to private

@rwp - sorry, it's now live!

I've actually figured it out, but I'm having a problem with 2 pages in particular.

https://www.planetsyz.com/mindforms - this embedded player looks perfect on desktop, but awful on mobile. I have tried setting the width to 100% (which works on all of the others pages) but when I do that, it looks perfect on mobile and TINY on desktop!

I also have https://www.planetsyz.com/sound-design which is showing perfectly on desktop, but the embedded videos are showing tiny on mobile. 

Any ideas on these?

Thanks so much!

It looks like the codeblock is only 25% of the width. You should be able to edit that in the editor to make it 50% by dragging it wider.

Drag the left side towards the text block, so they are both the same width.

@rwp - sorry which page are you referring to here? I asked for help on two pages 🙂

Thanks!

First one

@rwp - ah OK - I just tried that and it also looked fine on mobile, but still way too big on mobile.

I'm so stuck!

Perhaps it's something I can edit from the custom css area? At current, this CSS is in therre:

 }
iframe {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background: none;
    border: 0px;
    display: block;
   }}

I have done the same thing on this page - https://plantain-icosahedron-rn87.squarespace.com/config/pages but it's worked perfectly, so i'm confused as to why it's not working on one page!

For the second one, the height: 100% is shrinking it.

The iframe tag says height=540

Try this in the max-width: 991px code block

iframe {

height: 540px

}

3 minutes ago, tuesdayroo said:

@rwp - ah OK - I just tried that and it also looked fine on mobile, but still way too big on mobile.

I'm so stuck!

Perhaps it's something I can edit from the custom css area? At current, this CSS is in therre:

 }
iframe {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background: none;
    border: 0px;
    display: block;
   }}

If you do width: 100% !important; it will fix it. Then that column only being 25% wide will become visible.

If you make them both 50% and do the !important, it might be closer to what you are after.

YES - thank you @rwp - first issue is now sorted, thanks for that.

I'll have a look at the second one now 🙂

OK - I have one more question @rwp - do you know how to remove this white space that showing underneath the player on this page on mobile only: 

https://plantain-icosahedron-rn87.squarespace.com/config/pages

on desktop it looks totally fine, but on mobile there's all this blank white space

Thanks!

Which iframe? That link is your control panel, it just gives me an error saying I don't have access.

Hi @rwp - sorry didn't see your comment.

Here is an example of what I mean - if you view on mobile there is alot of white space showing under the tracks within the iframe.

https://www.planetsyz.com/onru001

any help on how to remove this would be great!

Thanks 🙂

Dynamically, you can't.

You can set up css to change it to a fixed height based on screen width, but you can not get the content height of an iframe of a page that is part of another website. I have been trying to figure out a work around for another project and it just doesn't seem possible.