How to use codepen for squarespace?

jenniferboddam · September 1, 2021

I've looked everywhere and I'm still not sure I understand how to take codepen code and add to squarespace. All I've seen is to just add a code block and put it all in the code block? I can get the html and css to work but soon as I try the Js it doesn't work. I was trying to test out this as a practice to try and figure it out.

https://codepen.io/cameronknight/pen/qBNvrRQ

on this page https://flugelhorn-seahorse-lzrb.squarespace.com/code-test-page?p?p

pw: design123

I cant find any clear information on how to integrate codepen to squarespace. If anyone has straight forward instructions or youtube videos / links etc where I can research this more I'd appreciate it. I think I'm just not sure where each part gets placed into squarespace or when to change an id to something squarespace specific? I think I just need it really dumbed down.. lol

DonnaMartinek · September 2, 2021

Looking for the same thing. I trying to find where and what code to put in. Does the Codepen HTML code get pasted into a Code Block on the page?

I'm trying to get this Codepen code into a Squarespace page:

https://codepen.io/nicklassandell/pen/ztGac

I tried copying and pasting the Codepen html code into a code <> block and it is a mess.

I know I am missing some important piece of code to get this to work.

I remember seeing a video combining the html, css, and js code together in the Squarespace code block and including a bit more code in between each of the pasted code.

I am hopeful that someone gives a step by step.

Edited September 2, 2021 by DonnaMartinek

jenniferboddam · September 3, 2021

@DonnaMartinek right? same I swear I've searched the whole of the internet and still don't understand, very frustrating to be at your fingertips and almost understand it and it just not work.

maybe @tuanphan or @creedon might know?

iamdavehart · September 3, 2021

hi @jenniferboddam @DonnaMartinek
you add a code block

Put the HTML section from the code pen directly in the block.
After the html code add the css part inside <style> </style> blocks
add the JS bit after that inside <script> </script> tags

All three sections go in the same code block. That should do it for most codepens.

If it doesn’t then it’s possible that codepen has some additional dependencies that you need to add.

Extra dependencies can be checked by clicking the cog icon in the code pen to look at its settings. You’ll see a section JS. If any files are listed there you’ll need to add those. Eg. in the Original post the codepen referenced jquery and selevtivizr.
each dependency gets added in its own script tag like this

If there are css dependencies then they will affect how the codepen looks. These dependencies (often fonts) would need to be added int he page header. Using a link tag

go to the advanced section of your page and add this to the page header

(editing on my mobile so can’t add code blocks here but I’ll try to update later with a better example)

Edited September 3, 2021 by iamdavehart
Adding in dependencie.

jenniferboddam · September 3, 2021

@iamdavehart ah ok thank you so much!!

So I was doing the first part correct that you explained, basically everything in the codeblock wrapped in its own tag.

I'm not sure if I'm fully clear on the dependencies part yet. I attached a screen shot. Is that what you mean? under the JS section and then those three links would be wrapped in <scrip></script> tags underneath the rest inside the code block?

I did that and it hasn't seemed to change anything to get it to work. I also ask the author of the code pen about using it in squarespace and they said "I think it might be possible if you installed the GSAP and Locomotive libraries via CDN"

I have no idea what gsap/ locomotive libraries or CDN are, is that what the dependencies are or is it something else?

thank you for the clear explanation so far though! it cleared up what I was initially confused about

iamdavehart · September 3, 2021

GSAP is an animation library. and yes. It is a dependency. It needs to be added as a dependency as I mentioned above. CDN is just a way of saying URL in this case so add the url from the links in your screenshot into the src property of the script tags. Will post an example shortly

jenniferboddam · September 3, 2021

Ok thank you, I will wait for your example, Do the <script> dependencies go in the code block or do all dependencies go into the page header?

iamdavehart · September 3, 2021

Your code block should look like this then:

<!-- insert any HTML code from the pen below this line -->


<!-- insert any CSS Code between these style tags -->
<style>
  
</style>

<!-- insert any JS dependencies here -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src=""></script>

<!-- insert any JS Code from teh code pen inside these script tags -->
<script>
  
</script>

As the pen contains CSS dependencies, you need to add those to the page header. you *could* put these at the top of the code block too if you want, but it's not best practice for link tags. If you're just trying it, then no harm doing that, but better way is to put it in the header. same is probably true for the JS dependencies tbh, but it depends how they've been written.

Open the squarspace page's settings, click advanced and add the link tags into the code injection

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" />
<link rel="stylesheet" href="https://use.typekit.net/skn8ash.css" />

if the codepen had any HTML head code (your example doesn't) then you would add that here too.

Edited September 3, 2021 by iamdavehart

iamdavehart · September 3, 2021

I would add that codepens aren't written to be simply embedded into any old site, there's all sorts of things that could trip you up, especially if they've used classnames or document Ids that trip over squarespace's own ID system (mostly Yahoo's naming system actually, but that's another story).

A full implementation may require editing of the code, not just for IDs, but for execution order too, as squarespace may not have loaded the full page by the time the code executes.

For simple examples, what I've written will probably suffice, but some codepens get very long, and they're not always written in the most robust way. Still, hopefully what I've written will help, but codepen is a demo site, not always production code and certainly not written to play on any site other than codepen.

For example, in your horizontal text holder, the author of the code pen changes the style of the p (paragraph) element. this has a very good chance of affecting the style of all paragraphs on the page that the code block is hosted, so you would need to change that. One way to do that is to find the block id from squarespace and add that before EVERY rule in their CSS.

so "p { ... }" becomes "#block-yui_3_17_2_1_1629035493144_2260 p { ... }"

Good luck!

Edited September 3, 2021 by iamdavehart

jenniferboddam · September 3, 2021

Thank you for the break down, for sure clears it up!

and yeah I figured that might be the case here with this one. I added everything in the way you showed and its just not working. And I think for what I want it for it would be too complicated for squarespace to work with sadly. But good to know how it all works anyways, appreciate you taking the time!

DonnaMartinek · September 4, 2021

THANK YOU so much for the breakdown and the explanations!

I really appreciate it.

DonnaMartinek · September 4, 2021

YESSSS!!!!! It worked! Well, almost. For some reason the sliding box goes to the top of the page all the way to the bottom of the page and is on top of all of the other sections including the header and footer. But your instructions worked! Thank you @iamdavehart and @jenniferboddam

Here is the code:

<header class="section header">
   <div class="section-inner">

       <div class="master-head">
           <h1 class="page-title">Colored Stem</h1>
           <p class="page-description">Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water.</p>
           <p class="scroll-button" onClick="$('.post-wrapper .post:first-child .stem-overlay .icon').click();">Ready to go for a ride?</p>
       </div>

   </div> 
</header>

<div class="section main-content">
   <div class="section-inner">

       <div class="stem-padding"></div>

       <div class="post-wrapper">

           <article class="post bitbucket-icon">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post m-icon" data-stem-color="green">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post music-icon" data-stem-color="yellow">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post twitter-icon" data-stem-color="white">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post bitbucket-icon">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post music-icon" data-stem-color="yellow">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>
           <article class="post bitbucket-icon">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post m-icon" data-stem-color="green">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post music-icon" data-stem-color="yellow">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post twitter-icon" data-stem-color="white">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post bitbucket-icon">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>

           <article class="post music-icon" data-stem-color="yellow">
               <div class="stem-overlay">
                   <div class="icon"></div>
                   <div class="stem-mask"></div>
               </div>

               <div class="post-content">
                   <p class="meta">Written yesterday at 8:56 pm</p>
                   <h2 class="post-title">This is my post title</h2>
                   <div class="entry-content">
                       <p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
                   </div>
               </div>
           </article>
       </div> 

       <div class="single-stem-icon scroll-to-top trigger-scroll-to-top"></div>

   </div> 
</div> 

<footer class="footer section">
   <div class="section-inner">

       <div class="good-bye">
           <p>That's all, buddy!</p>
       <p>Psst. You can click the icons to scroll to each post. Click the last one to scroll back up.</p>

   </div> 
</footer> 
<style>
/*========== Global ==========*/
/*========== Basics ==========*/
html,
body {
height: 100%;
}
body {
background: #112C30;
margin: 0px;
padding: 0px;
font-family: sans-serif;
font-size: 15px;
line-height: 26px;
color: #B9CFD0;
font-family: 'Roboto Slab', serif;
overflow-x: hidden;
overflow-y: scroll;
}
a {
color: #B9CFD0;
text-decoration: none;
border-bottom: 1px solid #B9CFD0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Comfortaa', cursive;
}
/*========== Sections ==========*/
.header {
text-align: center;
position: relative;
z-index: 1;
background-image: linear-gradient(to bottom, #6fc7d4 0%, #39ACBD 100%);
}
.header .master-head {
padding: 7% 30px;
}
.header .page-title {
padding: 0 30px 0 30px;
font-size: 60px;
line-height: 1em;
letter-spacing: 10px;
color: #FFF;
}
.header .page-description {
margin: 30px auto;
max-width: 600px;
font-size: 18px;
line-height: 2em;
color: #FFF;
}
.header .scroll-button {
color: #FFF;
font-size: 20px;
padding: 15px 20px 15px 20px;
display: inline-block;
background: #3093A2;
cursor: pointer;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.header .scroll-button:hover {
background: #246f7b;
}
.header .scroll-button:active {
background: #194c53;
}
.main-content {
margin: 0px auto;
position: relative;
}
.main-content .section-inner,
.main-content .post-wrapper {
*zoom: 1;
}
.main-content .section-inner:before,
.main-content .post-wrapper:before,
.main-content .section-inner:after,
.main-content .post-wrapper:after {
content: "";
display: table;
}
.main-content .section-inner:after,
.main-content .post-wrapper:after {
clear: both;
}
.footer {
background: #112C30;
padding: 150px 0px 300px 0px;
position: relative;
z-index: 1;
}
.footer .good-bye {
text-align: center;
font-size: 18px;
line-height: 36px;
}
.footer .good-bye p {
display: block;
margin: 0px auto 30px auto;
max-width: 300px;
clear: both;
}
.section .section-inner {
margin: 0px auto;
width: 1024px;
}
@media only screen {
.section .section-inner {
    width: auto;
    max-width: 1024px;
}
}
/*========== Stem ==========*/
.stem-wrapper {
position: fixed;
top: 0px;
bottom: 0px;
left: 50%;
}
.stem-wrapper.color-yellow .stem-background {
background: #E9E566;
}
.stem-wrapper.color-green .stem-background {
background: #35C189;
}
.stem-wrapper.color-white .stem-background {
background: #FFF;
}
.stem-wrapper .stem,
.stem-wrapper .stem-background {
position: absolute;
top: 0px;
left: -30px;
width: 60px;
}
.stem-wrapper .stem {
background: #1e4f56;
height: 100%;
}
.stem-wrapper .stem-background {
background: #39ACBD;
height: 50%;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.stem-padding,
.single-stem-icon {
width: 60px;
height: 60px;
margin: 0px auto;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center;
}
.single-stem-icon.scroll-to-top {
cursor: pointer;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/scroll-to-top-icon.png);
}
/*========== Post wrapper ==========*/
.post-wrapper {
*zoom: 1;
}
.post-wrapper:before,
.post-wrapper:after {
content: "";
display: table;
}
.post-wrapper:after {
clear: both;
}
.post-wrapper .post {
position: relative;
width: 432px;
padding: 0px 0px 60px 0px;
clear: both;
opacity: 1;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
.post-wrapper .post.hidden .post-content {
-webkit-transform: translateY(100px) rotateX(30deg);
-moz-transform: translateY(100px) rotateX(30deg);
-ms-transform: translateY(100px) rotateX(30deg);
-o-transform: translateY(100px) rotateX(30deg);
transform: translateY(100px) rotateX(30deg);
opacity: 0;
}
.post-wrapper .post:hover .post-content,
.post-wrapper .post.active .post-content {
opacity: 1;
}
.post-wrapper .post:hover .post-content .meta,
.post-wrapper .post.active .post-content .meta {
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.post-wrapper .post:nth-child(even) {
float: right;
}
.post-wrapper .post:nth-child(odd) {
float: left;
}
.post-wrapper .post:nth-child(even) .stem-overlay {
left: -110px;
}
.post-wrapper .post:nth-child(odd) .stem-overlay {
right: -110px;
}
.post-wrapper .post.music-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/music-icon.png);
}
.post-wrapper .post.bitbucket-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/bitbucket-icon.png);
}
.post-wrapper .post.m-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/m-icon.png);
}
.post-wrapper .post.twitter-icon .stem-overlay .icon {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/twitter-icon.png);
}
.post-wrapper .post .stem-overlay {
position: absolute;
top: 0px;
bottom: 0px;
width: 60px;
}
.post-wrapper .post .stem-overlay .icon {
background: transparent no-repeat center center;
height: 60px;
width: 60px;
cursor: pointer;
}
.post-wrapper .post .stem-overlay .stem-mask {
position: absolute;
top: 60px;
bottom: 0px;
left: 0px;
right: 0px;
background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/stem-mask.png) repeat-y top center;
}
.post-wrapper .post .post-content {
opacity: 0.3;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.post-wrapper .post .post-content .meta {
color: rgba(255, 255, 255, 0.3);
margin: 0px 0px 15px 0px;
letter-spacing: 1px;
opacity: 0;
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transform: translateY(-5px);
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-o-transform: translateY(-5px);
transform: translateY(-5px);
}
.post-wrapper .post .post-content .post-title {
font-size: 32px;
line-height: 42px;
margin: 0px 0px 15px 0px;
}
/*========== Media queries ==========*/
@media only screen and (max-width: 1080px) {
.main-content,
.main-content .section-inner {
    max-width: none;
}
.stem-wrapper {
    left: 80px;
}
.stem-padding,
.single-stem-icon {
    margin: 0px;
    float: left;
    margin-left: 50px;
}
.post-wrapper .post,
.post-wrapper .post:nth-child(even),
.post-wrapper .post:nth-child(odd) {
    width: auto;
    margin-left: 110px;
    float: none;
}
.post-wrapper .post .stem-overlay,
.post-wrapper .post:nth-child(even) .stem-overlay,
.post-wrapper .post:nth-child(odd) .stem-overlay {
    left: -60px;
    right: auto;
}
.post-wrapper .post .post-content {
    padding: 0px 50px;
}
}
@media only screen and (max-width: 700px) {
.header .page-title {
    font-size: 40px;
}
.post-wrapper .post {
    margin-left: 90px !important;
}
.post-wrapper .post .post-content {
    padding: 0 25px;
}
.stem-wrapper {
    left: 60px;
}
.stem-padding,
.single-stem-icon {
    margin-left: 30px;
}
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
</style>

How to use codepen for squarespace?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

iamdavehart

iamdavehart

jenniferboddam

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources