adrianye Posted September 9, 2020 Share Posted September 9, 2020 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> Link to comment
tuanphan Posted September 9, 2020 Share Posted September 9, 2020 It seems you solved? If no, where is embed block? 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
augbro Posted December 23, 2020 Share Posted December 23, 2020 I have the same question. Any headway on solving this? Link to comment
tuanphan Posted December 24, 2020 Share Posted December 24, 2020 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
dotBliss Posted January 5, 2021 Share Posted January 5, 2021 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
dotBliss Posted January 5, 2021 Share Posted January 5, 2021 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
miss-b Posted June 27, 2021 Share Posted June 27, 2021 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. Link to comment
tuanphan Posted June 30, 2021 Share Posted June 30, 2021 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 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
mccurran8 Posted October 24, 2022 Share Posted October 24, 2022 @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 Link to comment
tuanphan Posted October 27, 2022 Share Posted October 27, 2022 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 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
Pablo8635 Posted February 23 Share Posted February 23 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 Link to comment
tuanphan Posted February 26 Share Posted February 26 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? 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
addem Posted March 28 Share Posted March 28 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? Link to comment
creedon Posted March 28 Share Posted March 28 (edited) 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. Edited March 28 by creedon addem 1 Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment