AllenWroteOn Posted February 8, 2022 Share Posted February 8, 2022 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> Link to comment
tuanphan Posted February 12, 2022 Share Posted February 12, 2022 It looks fine here. Did you solve it? 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
AllenWroteOn Posted February 12, 2022 Author Share Posted February 12, 2022 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. Link to comment
Solution creedon Posted February 13, 2022 Solution Share Posted February 13, 2022 (edited) Quote So I'm still looking for a more elegant solution if there is one. Because the typewriter effect is dynamic the height of that element is changing which causes the image to move about on mobile. I'm thinking the most elegant solution might be to use a CSS variable to set the min-height and adjust it via the typewriter effect. I don't have any code for doing that. It's just a guess on my part for the most elegant solution. A less elegant solution but perhaps better than the font-size adjustment is the following. @media screen and ( max-width : 767px ) { #block-yui_3_17_2_1_1644293540448_3763 h4 { min-height : 112px; } } You could try to adjust the min-height value to cover as many cases as possible but it may not work at every window width. Let us know how it goes. Edited February 13, 2022 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
AllenWroteOn Posted February 13, 2022 Author Share Posted February 13, 2022 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! creedon 1 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