joshuaechevarriadop Posted November 27, 2022 Share Posted November 27, 2022 Hey all So im having an issue building this new site. So im making a custom home page - I removed the header and footer in the page's code injection <head> <style> #header, #footer-sections { display: none; } </style> </head> Then I am trying to add 4 customized buttons but every time I add the code blocks - they shift after I save. See video below. Can anyone see why this would be happening and offer advice on how to resolve it? Thanks Also here is the code that I am using for the button <html> <body> <style type="text/css"> .word{ display: flex; font-size: 40px; font-family: "Bebas Neue"; font-weight: bold; text-decoration: none; color: white; opacity:0.8; padding-top: 20px; padding-left: 30px; margin: 5%; } .r-anim{ transform: translateY(-30%); width: 100% } .s-anim{ transform: translateY(30%); width: 100% } .m-anim{ transform: translateY(50%); width: 100% } .word:hover .r-anim, .word:hover .s-anim{ transform: translateY(0%); transition: 1s all; } .word:hover .m-anim{ transform: translateY(0%); font-size: 40px; transition: 1s all; } .word:not(:hover) .m-anim{ transform: translateY(50%); font-size: 30px; transition: 1s all; } .word:not(:hover) .r-anim{ transform: translateY(-30%); transition: 1s all; } .word:not(:hover) .s-anim{ transform: translateY(30%); transition: 1s all; } </style> </body> <a class="word" href="https://en.wikipedia.org" target="_top"</a> <div class="anim-wrapper"> <div class="r-anim">R</div> </div> <div>E</div> <div class="anim-wrapper"> <div class="s-anim">S</div> </div <div>U</div> <div class="anim-wrapper"> <div class="m-anim">M</div> </div> <div>E</div> </div> </html> 363426745_codingproblem.mp4 Link to comment
Beyondspace Posted November 28, 2022 Share Posted November 28, 2022 10 hours ago, joshuaechevarriadop said: Hey all So im having an issue building this new site. So im making a custom home page - I removed the header and footer in the page's code injection <head> <style> #header, #footer-sections { display: none; } </style> </head> Then I am trying to add 4 customized buttons but every time I add the code blocks - they shift after I save. See video below. Can anyone see why this would be happening and offer advice on how to resolve it? Thanks Also here is the code that I am using for the button <html> <body> <style type="text/css"> .word{ display: flex; font-size: 40px; font-family: "Bebas Neue"; font-weight: bold; text-decoration: none; color: white; opacity:0.8; padding-top: 20px; padding-left: 30px; margin: 5%; } .r-anim{ transform: translateY(-30%); width: 100% } .s-anim{ transform: translateY(30%); width: 100% } .m-anim{ transform: translateY(50%); width: 100% } .word:hover .r-anim, .word:hover .s-anim{ transform: translateY(0%); transition: 1s all; } .word:hover .m-anim{ transform: translateY(0%); font-size: 40px; transition: 1s all; } .word:not(:hover) .m-anim{ transform: translateY(50%); font-size: 30px; transition: 1s all; } .word:not(:hover) .r-anim{ transform: translateY(-30%); transition: 1s all; } .word:not(:hover) .s-anim{ transform: translateY(30%); transition: 1s all; } </style> </body> <a class="word" href="https://en.wikipedia.org" target="_top"</a> <div class="anim-wrapper"> <div class="r-anim">R</div> </div> <div>E</div> <div class="anim-wrapper"> <div class="s-anim">S</div> </div <div>U</div> <div class="anim-wrapper"> <div class="m-anim">M</div> </div> <div>E</div> </div> </html> 363426745_codingproblem.mp4 On your video, i find that you are using <head></head> tag, <html></html>, <body></body> tag I think it is not necessary to put in. Basically, Squarespace site has already them, so it may cause some conflicts BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted November 28, 2022 Share Posted November 28, 2022 Can you share your URL so we can take a look? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
joshuaechevarriadop Posted November 28, 2022 Author Share Posted November 28, 2022 8 hours ago, Beyondspace said: On your video, i find that you are using <head></head> tag, <html></html>, <body></body> tag I think it is not necessary to put in. Basically, Squarespace site has already them, so it may cause some conflicts I deleted the extra tags. Unfortunately it didn't help. The code blocks keep shifting when I save Link to comment
joshuaechevarriadop Posted November 28, 2022 Author Share Posted November 28, 2022 35 minutes ago, Beyondspace said: Can you share your URL so we can take a look? https://blueberry-carrot-xawg.squarespace.com/ PW: codeblock Link to comment
Beyondspace Posted November 28, 2022 Share Posted November 28, 2022 I find that the fe element is out of fluid engine for some reason This is your current fluid engine This is the fluid engine on my site. All fe blocks are the children of the fluid-engine Do you have any other custom code which changes HTML DOM? One more thing, I find that you have a custom code to set the display: flex for section, so the width of section could be affected. And may be somehow it leads to your current state. Can you explain the purpose of this code? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
joshuaechevarriadop Posted November 28, 2022 Author Share Posted November 28, 2022 1 minute ago, Beyondspace said: Do you have any other custom code which changes HTML DOM? One more thing, I find that you have a custom code to set the display: flex for section, so the width of section could be affected. And may be somehow it leads to your current state. Can you explain the purpose of this code? this is the only code im using. Im using the flex property for the text. If I do display:block; it changes the orientation of the text but what I am noticing is that when I remove the flex property - the background shifts as well so how do I stop the grid and background from reacting to my code blocks? Link to comment
Beyondspace Posted November 28, 2022 Share Posted November 28, 2022 1 minute ago, joshuaechevarriadop said: this is the only code im using. Im using the flex property for the text. If I do display:block; it changes the orientation of the text but what I am noticing is that when I remove the flex property - the background shifts as well so how do I stop the grid and background from reacting to my code blocks? Have you tried removing this display: flex temporarily, then adding this code block again and checked if it works properly? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
joshuaechevarriadop Posted November 28, 2022 Author Share Posted November 28, 2022 9 minutes ago, Beyondspace said: Have you tried removing this display: flex temporarily, then adding this code block again and checked if it works properly? Yes. For some reason any display code in the code block affects the background image. I think I need to add code in each code block that tells the background to stay as is but im not sure how to do that Link to comment
joshuaechevarriadop Posted November 28, 2022 Author Share Posted November 28, 2022 Thought I had solved it by moving the css into the Custom CSS section. didnt work Any other ideas? Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 11/29/2022 at 2:14 AM, joshuaechevarriadop said: Thought I had solved it by moving the css into the Custom CSS section. didnt work Any other ideas? Can you share link to page where you use Code Block? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
joshuaechevarriadop Posted December 2, 2022 Author Share Posted December 2, 2022 4 hours ago, tuanphan said: Can you share link to page where you use Code Block? We can check easier I think I resolved this - there was one open div in a code block that for some reason was throwing everything out of wack. Beyondspace and tuanphan 2 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