dotBliss

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

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>