Help with padding on code pen

i would like some help with my code pen on squarespace 

This is the codepen

.neoncontainer .flex
{
  position: relative;
  width: 260px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

.neoncontainer .box::before
{
  content:' ';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}

.neoncontainer .box::after
{
  content:'';
  position: absolute;
  top: 0;
  left: 50;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(30px);
}

.neoncontainer .box:hover:before,
.neoncontainer .box:hover:after
{
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 90px);
  
}

.neoncontainer .box:nth-child(1):before,
.neoncontainer .box:nth-child(1):after
{
  background: linear-gradient(315deg, #ffbc00, #ff0058)
}

.neoncontainer .box:nth-child(2):before,
.container .box:nth-child(2):after
{
  background: linear-gradient(315deg, #03a9f4, #ff0058)
}

.neoncontainer .box:nth-child(3):before,
.neoncontainer .box:nth-child(3):after
{
  background: linear-gradient(315deg, #4dff03, #00d0ff)
}

.neoncontainer .box span
{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.neoncontainer .box span::before
{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.1s;  
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.neoncontainer .box:hover span::before
{
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.neoncontainer .box span::after
{
  content:'';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  animation-delay: -1s;
}

.neoncontainer .box:hover span:after
{
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

@keyframes animate
{
  0%, 100%
  {
    transform: translateY(10px);
  }
  
  50%
  {
    transform: translate(-10px);
  }
}

.neoncontainer .box .content
{
  position: relative;
  left: 0;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 1;
  transform: 0.5s;
  color: #fff;
}

.neoncontainer .box:hover .content
{
  left: -25px;
  padding: 60px 40px;
}

.neoncontainer .box .content h2
{
  font-size: 2em;
  color: #fff;
  margin-bottom: 10px;
}

.neoncontainer .box .content p
{
  font-size: 1.1em;
  margin-bottom: 10px;
  line-height: 1.4em;
}

.neoncontainer .box .content a
{
  display: inline-block;
  font-size: 1.1em;
  color: #111;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 5px;
}

.neoncontainer .box .content a:hover
{
  background: #ffcf4d;
  border: 1px solid rgba(255, 0, 88, 0.4);
  box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
}

I've added it to my product pages and I've change the colour #hex codes and I've removed the buttons

In mobile and desktop view the boxes and crammed on top of each other and overlapping.  

My question is this..

is there a way I can add some space between each box so they display better on desktop and mobile?

Maybe it would be better if they stacked on mobile but displayed in a row on desktop? 

Do you know how to achieve this?  

This is the link to the URL I've been playing with today with your help. 

https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

https://codepen.io/kodplay/pen/oNBreRJ 

this is the original code pen

I removed the code for the container, I also removed the buttons I just want them to stack on mobile and display horizontal on desktop view with padding either side of the boxes so they're not crammed

1 hour ago, Cyperpunk-girl-333 said:

i would like some help with my code pen on squarespace 

 

This is the codepen

.neoncontainer .flex
{
  position: relative;
  width: 260px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

.neoncontainer .box::before
{
  content:' ';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}

.neoncontainer .box::after
{
  content:'';
  position: absolute;
  top: 0;
  left: 50;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(30px);
}

.neoncontainer .box:hover:before,
.neoncontainer .box:hover:after
{
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 90px);
  
}

.neoncontainer .box:nth-child(1):before,
.neoncontainer .box:nth-child(1):after
{
  background: linear-gradient(315deg, #ffbc00, #ff0058)
}

.neoncontainer .box:nth-child(2):before,
.container .box:nth-child(2):after
{
  background: linear-gradient(315deg, #03a9f4, #ff0058)
}

.neoncontainer .box:nth-child(3):before,
.neoncontainer .box:nth-child(3):after
{
  background: linear-gradient(315deg, #4dff03, #00d0ff)
}

.neoncontainer .box span
{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.neoncontainer .box span::before
{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.1s;  
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.neoncontainer .box:hover span::before
{
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.neoncontainer .box span::after
{
  content:'';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  animation-delay: -1s;
}

.neoncontainer .box:hover span:after
{
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

@keyframes animate
{
  0%, 100%
  {
    transform: translateY(10px);
  }
  
  50%
  {
    transform: translate(-10px);
  }
}

.neoncontainer .box .content
{
  position: relative;
  left: 0;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 1;
  transform: 0.5s;
  color: #fff;
}

.neoncontainer .box:hover .content
{
  left: -25px;
  padding: 60px 40px;
}

.neoncontainer .box .content h2
{
  font-size: 2em;
  color: #fff;
  margin-bottom: 10px;
}

.neoncontainer .box .content p
{
  font-size: 1.1em;
  margin-bottom: 10px;
  line-height: 1.4em;
}

.neoncontainer .box .content a
{
  display: inline-block;
  font-size: 1.1em;
  color: #111;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 5px;
}

.neoncontainer .box .content a:hover
{
  background: #ffcf4d;
  border: 1px solid rgba(255, 0, 88, 0.4);
  box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
}

I've added it to my product pages and I've change the colour #hex codes and I've removed the buttons

In mobile and desktop view the boxes and crammed on top of each other and overlapping.  

 

My question is this..

is there a way I can add some space between each box so they display better on desktop and mobile?

Maybe it would be better if they stacked on mobile but displayed in a row on desktop? 

Do you know how to achieve this?  

This is the link to the URL I've been playing with today with your help. 

https://www.spacept.com.au/sqaurespace-websites/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

 

https://codepen.io/kodplay/pen/oNBreRJ 

this is the original code pen

I removed the code for the container, I also removed the buttons I just want them to stack on mobile and display horizontal on desktop view with padding either side of the boxes so they're not crammed

Can you share some screenshots which show the padding issue as you mentioned above?

3 hours ago, Cyperpunk-girl-333 said:

This is the link to the URL I've been playing with today with your help.

The link you provided is giving us a 404 which is an error, meaning the page does not exist.

We need an actual page that exists to begin to be able to help you.

https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast 

Password: thankyou, 

code on the product 🙂 in the aditional information section

6 hours ago, Cyperpunk-girl-333 said:

https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast 

 

Password: thankyou, 

code on the product 🙂 in the aditional information section

Is it the page you mean?

I can not the custom code on your site. Can you check it again?

Please click add to cart to view the page with the code injection on the additional product information,  please review in desktop and mobile. padding is crammed.

https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast/p//logo-design-gold-coast/3-new-logo-designs/website-design-digital-marketing-australia-/sqaurespace-website-designs

20 minutes ago, Cyperpunk-girl-333 said:

Please click add to cart to view the page with the code injection on the additional product information,  please review in desktop and mobile. padding is crammed.

 

https://www.spacept.com.au/spacept-website-designs/digital-marketing/website-design/branding-gold-coast/p//logo-design-gold-coast/3-new-logo-designs/website-design-digital-marketing-australia-/sqaurespace-website-designs

Should it look like this on desktop?

Yes that looks perfect on desktop 🙂 

Can they stack on mobile view veridical?

How did you achieve that? 🙂

You can try adding to Home > Design > Custom Css

.neoncontainer {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 0;
}
.neoncontainer .box {
  position: relative;
  width: 20%;
}
.neoncontainer .box .content {
  width: 100%;
  box-sizing: border-box;
  height: 200px;
}
@media only screen and (max-width: 767px) {
  .neoncontainer {
    flex-direction: column;

  }
  .neoncontainer .box  {
    width: 80%;
    margin-bottom: 20px;
  }
}

I added that code and it went all jumbled. please check my site page with that code added

Can you move my code right down your current code. I check that mine is above your current code so It can not overwrite them

My code

Your code

this is the full code on mine ? I'm not sure i understand what you're asking me 

//neon box shop page//

.neoncontainer {
    display: flex;
  position: relative;
  width: 260px;
  height: 200px;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

.neoncontainer .box::before
{
  content:' ';
  position: absolute;
  top: 0;
  left: 50px;
  width: 50%;
  height: 100%;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
}

.neoncontainer .box::after
{
  content:'';
  position: absolute;
  top: 0;
  left: 50;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  transform: skewX(15deg);
  transition: 0.5s;
  filter: blur(30px);
}

.neoncontainer .box:hover:before,
.neoncontainer .box:hover:after
{
  transform: skewX(0deg);
  left: 20px;
  width: calc(100% - 90px);
  
}

.neoncontainer .box:nth-child(1):before,
.neoncontainer .box:nth-child(1):after
{
  background: linear-gradient(315deg, #233FFF, #ED26B5)
}

.neoncontainer .box:nth-child(2):before,
.container .box:nth-child(2):after
{
  background: linear-gradient(315deg, #233FFF, #ED26B5)
}

.neoncontainer .box:nth-child(3):before,
.neoncontainer .box:nth-child(3):after
{
  background: linear-gradient(315deg, #ED26B5, #00d0ff)
}

.neoncontainer .box span
{
  display: box;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.neoncontainer .box span::before
{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.1s;  
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08)
}

.neoncontainer .box:hover span::before
{
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.neoncontainer .box span::after
{
  content:'';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  animation-delay: -1s;
}

.neoncontainer .box:hover span:after
{
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}

@keyframes animate
{
  0%, 100%
  {
    transform: translateY(10px);
  }
  
  50%
  {
    transform: translate(-10px);
  }
}

.neoncontainer .box .content
{
  position: relative;
  left: 0;
  padding: 20px 40px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  z-index: 1;
  transform: 0.5s;
  color: #fff;
}

.neoncontainer .box:hover .content
{
  left: -25px;
  padding: 60px 40px;
}

.neoncontainer .box .content h2
{
  font-size: 2em;
  color: #fff;
  margin-bottom: 10px;
}

.neoncontainer .box .content p
{
  font-size: 1.1em;
  margin-bottom: 10px;
  line-height: 1.4em;
}

.neoncontainer .box .content a
{
  display: inline-block;
  font-size: 1.1em;
  color: #111;
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 700;
  margin-top: 5px;
}

.neoncontainer .box .content a:hover
{
  background: #ffcf4d;
  border: 1px solid rgba(255, 0, 88, 0.4);
  box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
}

On 12/2/2022 at 3:01 PM, Beyondspace said:

You can try adding to Home > Design > Custom Css

.neoncontainer {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  justify-content: space-between;
  margin: 0;
}
.neoncontainer .box {
  position: relative;
  width: 20%;
}
.neoncontainer .box .content {
  width: 100%;
  box-sizing: border-box;
  height: 200px;
}
@media only screen and (max-width: 767px) {
  .neoncontainer {
    flex-direction: column;

  }
  .neoncontainer .box  {
    width: 80%;
    margin-bottom: 20px;
  }
}

hi @Beyondspace I've added your code directly under my code 

can you please review it

On 12/29/2022 at 4:52 AM, Cyperpunk-girl-333 said:

 

I check that it looks better now

Do you still need help?

Yes, would you know how add more padding to the top so the heading 1 and heaving 4 are centered

on desktop and mobile if you check it looks like the text is sitting to high in the contairer