Jump to content

Help resizing iFrames for mobile

Recommended Posts

  • Replies 14
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

@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!

Link to comment

@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;
   }}

Link to comment
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.

Link to comment

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.

Link to comment

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.