AllenWroteOn

Creedon's solution was near perfect. I just had to adjust the height value to 160px and adjusted the code block to make sure the entire thing was contained in a single h4 span so the min-height effected the entire block only once. From my limited experimentation it seems to work at every resolution now. Thanks so much for your help!

As a temporary solution I reduced the font size @media screen so it would all fit on the same line. I'd still prefer it be at the original font size. I was also able to make it work on mobile by adding a bunch   to get things to add spaces until it added another line, but that messed up the spacing for desktop so that it started to bump a line instead. So I'm still looking for a more elegant solution if there is one.

Site URL: https://wroteon.com I just added a typing effect via JS to my home page and love the look on desktop, but when viewing the page on mobile, the animation of the text causes it to wrap to a new line, which expands the size of the block and is quite distracting. Is it possible to keep the block size fixed while using this animation? I've tried setting a fixed height on the section, but it still ends up moving around the image block below it. Is there a way to keep the text container from changing sizes with animation? If it helps, the code for the text is below: <h4> The webpage opens revealing a bespectacled man. This is ALLEN ROUGHTON, a <span id="app"></span></h4> <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script> <script> var app = document.getElementById('app'); var typewriter = new Typewriter(app, { loop: true, delay: 75, }); typewriter .pauseFor(2000) .typeString('screenwriter') .pauseFor(1000) .deleteChars(12) .pauseFor(500) .typeString('script reader') .pauseFor(1000) .deleteChars(13) .pauseFor(500) .typeString('consultant') .pauseFor(1000) .start(); </script>

Site URL: https://www.wroteon.com/tester I am trying to inject the code from this article into my own site using a code block. In trying to combine the codes into one and change it to h3 text, I tried the below code, which give the result you can currently see with the dark grey background (please ignore the typewriter effect on the text in the lower section as that is a different approach I am wanting to avoid using): <h3 id="check"> I am <span id="typewriter"></span> </h3> <script> let data = ["Text1", "Text2","Text3","Text4"]; let len = 0; let speed=150; for (let i = 0; i < data.length; ++i) len += 2*data[i].length; len += 4*data.length; function type() { let p=0; for (let i = 0; i < data.length; ++i) { let x = 0; while (x <= data[i].length) { let y=x; setTimeout(()=>{ document.getElementById('typewriter').innerHTML=`${data[i].substr(0,y)}` },p*speed) ++x,++p; } --x,p+=2; while (x >= 0) { let y=x; setTimeout(()=>{ document.getElementById('typewriter').innerHTML=`${data[i].substr(0,y)}` },p*speed) --x,++p; } } setTimeout(() => { type(); }, len * speed); } function blinkingPointer(){ setTimeout(()=>{ document.getElementById('check').style.borderRightColor=`red`; },500) setTimeout(()=>{ document.getElementById('check').style.borderRightColor='transparent' },1000) setTimeout(()=>{ blinkingPointer(); },1000) } blinkingPointer(); type(); #check{ margin:2px auto; width: fit-content; border-right: 1px solid; } </script> I have a feeling this has more to do with how I am injecting the code rather than the code itself. Thanks for any help you can give!

Not sure if topic bumping works/is allowed on here, but I still haven't been able to figure this out. Any help would be much appreciated!

Sorry, I didn't realize there were two passwords. I removed the password from the individual page and the general password for the site is: forum

Site URL: https://crocodile-terrier-syp9.squarespace.com/video-background EDIT: In case anyone finds this in the future looking for the same solution, here's what I ended up using: section[data-section-id="61dcab2afb782968f35fdb42"]{ iframe{ transform: scale(1.35) !important; } } ORIGINAL QUESTION: I want to use the background video feature in one of my sections. It looks great in full screen on the desktop, but reducing the window size or viewing on mobile adds black bars above and below the video as seen in the sample page images below (or directly at https://crocodile-terrier-syp9.squarespace.com/video-background pw: forum). This bar is NOT part of the video, but some sort of margin or padding added responsively. Is there any way to make sure the video is always 100% of the height of the section (i.e., the height would always be equal to the section height and the width would be cropped)?