Jump to content

Help with padding on code pen

Recommended Posts

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

Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

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?

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

image.thumb.png.a6a7830be1b74c4a73eec4c4cc6068cc.png

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

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

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

Edited by Cyperpunk-girl-333
Link to comment
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?

image.thumb.png.1695e1fdb03a75039e6fdc59f701014d.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

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

 

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 move my code right down your current code. I check that mine is above your current code so It can not overwrite them

image.thumb.png.53fef6d9bd64c067decc5a06bfe5d78d.png

My code

 

image.thumb.png.638558047b10c7dbb9527a21449b9885.png

Your code

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

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);
}

Link to comment
  • 4 weeks later...
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

 

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

 

I check that it looks better now

image.thumb.png.05d07c90eb96201e0840f6701dd26c99.png

Do you still need help?

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

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.