How to resize an embed block?

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. 

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>

It seems you solved?

If no, where is embed block?

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

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

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>

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

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.

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.

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

@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.com

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.com

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

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

Hi, same question as the ones before.

I want to make the embedded presentation responsive to mobile and to desktop, can someone please help me?

Thanks

On 2/24/2023 at 1:15 AM, Pablo8635 said:

Hi, same question as the ones before.

I want to make the embedded presentation responsive to mobile and to desktop, can someone please help me?

 

Thanks

 

 

Can you share link to this page?

I've created this blog post:

https://www.axiomtutor.com/new-blog

and I can't get the embedded element to size up.  I've tried editing the height attribute of the <iframe> tag but it doesn't seem to adjust the height.  I've also tried to adjust the CSS by inserting a <style> tag through code injection but that doesn't seem to be working either.  Can anyone suggest how to do this?

3 hours ago, addem said:

Can anyone suggest how to do this?

First use a code block instead of an embed block. You can get the same end result, I think, but the embed has far too much overhead for my likes.

Second for your iframe height and width attributes use number only. No unit values (px).

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

Let us know how it goes.