I need help with my CSS and Code block

Site URL: https://www.spacept.com.au/store/p/32g3zcipummrllgffz4114v6b5ptcr-lgpam-bbp8n

How would i get the containers to display in a set of three on mobile and desktop because at the moment it's displaying in a line displaying in a row that goes down veridical ?

I would like them to display in a line of three like seen in the photo attached. I was playing around with the css to get this result but i lost what i had done 🥲 and i don't know how to fix it 

 

This is all code pen from - https://codepen.io/kodplay/pen/oNBreRJ I have changed some elements 

 

code on side 

code block 

<div class="container">
  <div class="box">
    <span></span>
    <div class="content">
      <h2>1 </h2>
      <p> Consultation & Review. </p>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="box">
    <span></span>
    <div class="content">
      <h2>2</h2>
      <p>Planning & Design.</p>
      <a href="#">Read More</a>
    </div>
  </div>
  <div class="box">
    <span></span>
    <div class="content">
      <h2>3</h2>
      <p>Create & Deliver.</p>
      <a href="#">Read More</a>
    </div>
  </div>
</div>

 

 

CSS

*
{

}

.container .box
{
  position: relative;
  width: 320px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 30px;
  transition: 0.5s;
}

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

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

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

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

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

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

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

.container .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)
}

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

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

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

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

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

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

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

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

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

Edited October 17, 2022 by christina_marie_333
changed on site

The issue you're probably having is that the codepen is standalone code, so it doesn't matter what classes and IDs you use. When you place it in your website, very generic classes being targeted in the styles like .container .content and .body are being used elsewhere and therefore being affected by this new CSS as well as your custom section. All you have to do is change the classes and IDs to unique values throughout the code. e.g. Replace every instance of container with funkycontainer (or anything you want). You also probably want to remove the CSS generically targeting body as that may be having the main effect on margins.

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

The display:flex; property needs to be applied to .neoncontainer rather than .box.

Edited October 17, 2022 by Ziggy

To clarify

Design - CSS

Change all .box to display:flex;

?? 

I tired that and it broke the code and the neon settings didn't work 😞 

I'm not sure i'm following your instructions correctly could you give a more detailed response.   thank you so much, I'm trying for a spacepunk theme its been a complete nightmare lol 

 

Do you mean that i update all the .box with

display:flex; to the css or the code block

 

because i attempted to add display:flex to all the .box ares and it 

it broke the hover and neon element of the design.  can you please show me a test that you've used to get this result? or explain it in greater detail for my understanding, please thank you very kindly

Edited October 17, 2022 by christina_marie_333

No, remove display:flex; from .box and add it to .neocontainer.

.neoncontainer .box
{
  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);
}

 

sorry Ziggy I tired to change in CSS but i don't think I am understaning can you rewrite code and paste for me? I would really deeply appreciate you for that

On 10/18/2022 at 2:04 AM, Ziggy said:

No, remove display:flex; from .box and add it to .neocontainer.

I don't understand what you mean

On 10/29/2022 at 8:08 AM, Cyperpunk-girl-333 said:

I don't understand what you mean

I think his mean is

Remove red code

and add this code 

.neoncontainer {
	display: flex;
}

 

That makes them sit too close together