Jump to content

How to resize an embed block?

Recommended Posts

Site URL: https://www.adrianye.com/ux-design/well-read

How do you resize an embedded Figma block? It ends up super tiny on my portfolio page and I need it to be visible and clickable. 

1066067606_ScreenShot2020-09-09at2_30_39AM.thumb.png.6b432bf2318ae3d06c1015d119af7184.png

 

Here's the embed code. I tried changing the height and width separately with no success.

  • <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="800" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNp3fm0oRYvDytAfYKZWdS7%2FWe-ll-Read-case-study%3Fnode-id%3D308%253A57%26viewport%3D-889%252C-2062%252C0.281281054019928%26scaling%3Dscale-down&chrome=DOCUMENTATION" allowfullscreen></iframe>
Link to comment
  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 months later...
15 hours ago, augbro said:

I have the same question. Any headway on solving this?

If you share link to page where you use embed block. We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Hey Y'all, I made a solution. Try this, and let me know if you have questions. 

 

Premise: A small javascript that reads the size of the window, passes that variable to width property of CSS.

 

Insert this into a code block on your squarespace page that hosts the iframe.

You will also need to add a bit to your Custom CSS page ((see next post))

<!-- Copy and paste all of this code into a code block on your squarespace page— make any necessary adjustments to numbers-->

<!-- Desktop Version of your iframe -->
<iframe src="https://www.___YourWebsiteHere.com" 
        class ="frame desktop" 
        id="desktopFrame" 
        scrolling="yes">
</iframe>

<!-- Mobile Version of your iframe -->
<iframe src="https://www.___YourWebsiteHere.com"
        class="frame mobile"
        id="mobileFrame"
        scrolling="yes">
</iframe>


<!-- Javascript code to retrieve width of window and convert it to CSS property -->
<script>
  // This function changes one scale of numbers to another scale of numbers - it's used later
  // heres a good expalination how it works: https://www.youtube.com/watch?v=nicMAoW6u1g
  const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}
  var r = document.querySelector(':root');
  var frameScale;
  
  // Call a function to scale iframe when window opens or resizes
  window.onload = frameScaler();
  window.onresize = function(){frameScaler()};

  function frameScaler(){
    // page-body is the main div that holds squarespace content
	var contentWidth = document.getElementById("page-body").offsetWidth - 300;
    
	// This is the function— takes current page width (contentWidth)
    // Then minimum and maximum expected values for the page content as pixels
    // and minimum and maximum expected values as decimal percentages
    // you can play with the last 4 numbers to make it work for your page
    frameScale = scale(contentWidth, 400, 2100, .2, .8);
	
    // Sets CSS prperties, desktop and mobile
    r.style.setProperty('--scaled', frameScale);
    r.style.setProperty('--scaledMobile', frameScale*11);
    
    // Sets another CSS property 
    contentWidth = contentWidth / 2500 ;
    //contentWidth = contentWidth + 'px';
     r.style.setProperty('--contentWidth', contentWidth);
  };
</script>

 

Link to comment

Here is the Custom CSS– copy and paste it; you might need to play with the numbers to get it looking good on your site!

 


// This makes your content spread the width of your browser not a default option on squarespace
// you can delete max-width or change it to have it be another percentage of the window
#page-body {
  	
    margin: 30px;
  	max-width: 100%;
 }
// Same thin here, but not sure why I included it
 #content {
    width: 100%;
    margin: 30px;
 }

// Dont delete this
:root {
}




// This hides the desktop iframe and replaces it with the mobile, specified in your codeblock
@media screen and (max-width: 720px){
  #sidebar-one-wrapper {
    display: none;
  }
  .desktop {
    display: none;
  }
  
 // you can change height to have it better fit your site
 .mobile {
    height: 1000px;
    padding: 0px;
    transform-origin: 0 0;
    transform: scale( var(--scaledMobile) );
    width: 200%;
  }
  #content {
    width: 100%;
    height: 600px;
    margin: 0px;
 }
  #page-body {
     margin: 0px;
  max-width: 100%;
 }
  
}


// Large Screens like high-res dektops
// you can change your height, but it might get buggy if you change width
@media screen and (min-width: 1070px){
  .desktop {
  	 height: 2200px;
     width: 300%;
     transform-origin: 0 0;
     transform: scale( var(--scaled));
 }
  .mobile {
    display: none;
  }
}

//Mid-Sized Screens like low-res desktops or ipads
// you can change height, but dont change width
@media screen and (max-width: 1069px) and (min-width: 720px){
  .desktop {
  	 height: 2200px;
     width: 800%;
     transform-origin: 0 0;
     transform: scale(var(--contentWidth));
 }
  .mobile {
    display: none;
  }
}

  
.frame {
  position: relative;
  float: left;
  border: none;
  scrolling: yes;
  height: 15000px;
  //width: 100%;
}

 

Link to comment
  • 5 months later...

Hello,

I have an image map embedded on my site that won't resize on mobile. I get white corners on the right side in mobile view.  I have tried various codes for making iframes responsive but this is not an iframe so it isn't working. I am posting images below. I'd be grateful for help as I'm new to coding. Many thanks.

Screenshot 2021-06-24 at 17.09.01.png

Screenshot 2021-06-24 at 17.08.53.png

Link to comment
On 6/27/2021 at 10:53 PM, miss-b said:

Hello,

I have an image map embedded on my site that won't resize on mobile. I get white corners on the right side in mobile view.  I have tried various codes for making iframes responsive but this is not an iframe so it isn't working. I am posting images below. I'd be grateful for help as I'm new to coding. Many thanks.

Screenshot 2021-06-24 at 17.09.01.png

Screenshot 2021-06-24 at 17.08.53.png

Answered your email. If it works, you can share code for other members

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
On 10/24/2022 at 12:22 PM, mccurran8 said:

@tuanphan can you please share the same answer you gave the original poster?

 

This is my page and I'm trying to embed the exact same type of content. I'd like it to be taller and less wide, to match the shape of the phone in the photo:  blenny-bullfrog-3xen.squarespace.comimage.thumb.png.54ac885c998ffb97d9e93853ba701a25.png

Which page are you referring to? I don't see it on homepage

https://blenny-bullfrog-3xen.squarespace.com/?noredirect

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.