Jump to content

Code in code block is affecting Fluid Engine Grid

Recommended Posts

I have inserted a code block that includes a display:flex property  - for some reason this is causing the fluid engine grid to go crazy and every time I save the progress - my code block location is completely shifted.  Do you know why this would be the case?  Is there a way to stop the code from affecting the rest of the website?

 

this is the code   and the effect of the code on the text is below

<style type="text/css">

.wordtwo{

display: flex;

font-size: 40px;

font-family: "Bebas Neue";

font-weight: bold;

text-decoration: none;

color: white;

opacity:0.8;

padding-top: 30px;

padding-bottom: 0px;

margin: 8%;

}



.t-anim{

  transform: translateY(-20%);

  width: 100%

}



.o -anim{

  transform: translateY(-30%);

  width: 100%

}



.l-anim{

  transform: translateY(-60%);

  width: 100%

}



.s-anim{

  transform: translateY(-40%);

  width: 100%

}





.wordtwo:hover .t-anim, .wordtwo:hover .l-anim, .wordtwo:hover .s-anim{

  transform: translateY(0%);

  transition: 1s all;

}



.wordtwo:hover .o-anim{

  transform: translateY(0%);

  font-size: 40px;

  transition: 1s all;

}





.wordtwo:not(:hover) .o-anim{

  transform: translateY(-30%);

  font-size: 30px;

  transition: 1s all;

}



.wordtwo:not(:hover)  .t-anim{

  transform: translateY(-20%);

  transition: 1s all;

}



.wordtwo:not(:hover)  .l-anim{

  transform: translateY(-60%);

  transition: 1s all;

}



.wordtwo:not(:hover) .s-anim{

  transform: translateY(-40%);

  transition: 1s all;

}



</style>

</body>





<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>



  <div class="anim-wrapper">

    <div class="t-anim">T</div>

  </div>

  <div>O</div>

<div class="anim-wrapper">

    <div class="o-anim">O</div>

  </div>

<div class="anim-wrapper">

    <div class="l-anim">L</div>

  </div>

  <div class="anim-wrapper">

    <div class="s-anim">S</div>

  </div>

 

Link to comment
  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, Ziggy said:

The CT of contact is certainly out of place, if that's what you are referring to. I would guess you have a closing DIV </div> after the A.

One of the DIVs was not closed >  so that fixed why the word was separated but I cant under stand why the grid is getting so messed up and out of place.  If you see the video - the grid is totally misaligned.  

Is there a code that can tell the grid to stay in place or to ignore the code blocks?

Link to comment
2 minutes ago, joshuaechevarriadop said:

One of the DIVs was not closed >

That's good to be fixed.


<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>

I think this line is causing the problem with the grid, can you test removing it? It seems to be being placed below the section grid, so there must be CSS targeting this with a flex attribute when it shouldn't be.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
36 minutes ago, Ziggy said:

That's good to be fixed.


<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>

I think this line is causing the problem with the grid, can you test removing it? It seems to be being placed below the section grid, so there must be CSS targeting this with a flex attribute when it shouldn't be.

I had the html at the bottom - when I moved it up top - it seems like it solved everything

Link to comment
40 minutes ago, Ziggy said:

That's good to be fixed.


<a class="wordtwo" href="https://en.wikipedia.org" target="_top"</a>

I think this line is causing the problem with the grid, can you test removing it? It seems to be being placed below the section grid, so there must be CSS targeting this with a flex attribute when it shouldn't be.

Nevermind - as soon as I saved it - everything went completely off

Link to comment

Okay, I could test it on one of my websites, and see if I can replicate the issue and fix it. Can you share the entire code?

Actually given that you have two blocks like this, have you tried temporarily removing one or the other?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.