Jump to content

Why are my code blocks shifting from the grid?

Recommended Posts

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>

Link to comment
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>

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

 

image.thumb.png.ea04037591ca763d8e532f0b906b65b4.png

image.thumb.png.6a55080b17736fad915438f4935923d9.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Can you share your URL so we can take a look?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

I find that the fe element is out of fluid engine for some reason

image.thumb.png.440c09815b91f9d2a92fa8bd56372054.png

This is your current fluid engine

 

image.thumb.png.f048c30f48eb33d6d68880bde393e726.png

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?

image.thumb.png.89bc316777774e35a1295bf9bb93d2a4.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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
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? 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

 

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
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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.