Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
tuesdayroo

Help resizing iFrames for mobile

Question

14 answers to this question

Recommended Posts

  • 1
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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Your site is set to private


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

First one


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

}


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

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.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...