Jump to content

CSS is causing entire page to not be 100% width

Recommended Posts

Site URL: https://www.defistrategies.com/consulting

So I have inserted code I have been working on but now it wont justify in the center when that's what I have coded to my knowledge. It also affects the heading that is text from squarespace. The other issue is that it isnt off centered in an external coding platforms.

<html lang="en">
  
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {

  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #141d2f;
  flex-wrap: wrap;
}
body .container {
  width: 100%;
  padding: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  margin:0 auto;
  flex-wrap: wrap;
}

  @media screen and (max-width: 1150px){
    body .container{
      display: flex;
    }
  }
  
body .container .card {
  position: relative;
  width: 300px;
  height:400px;
  background: #4cb5ff;
  border-radius: 15px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin: 0 auto;
}
body .container .card .face {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body .container .card .face.face1 {
  box-sizing: border-box;
  padding: 20px;
}
body .container .card .face.face1 h2 {
  margin: 0;
  padding: 0;
}
body .container .card:hover .face.face2 img {
   display: none;
}
body .container .card .face.face1 .java {
  background-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .container .card .face.face1 .python {
  background-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .container .card .face.face1 .cSharp {
  background-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .container .card .face.face2 {
  transition: 0.5s;
}
body .container .card .face.face2 h2 {
  margin: 0;
  padding: 0;
  font-size: 10em;
  color: #fff;
  transition: 0.5s 0.5s;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
body .container .card:hover .face.face2 {
  height: 60px;
  }
  
body .container .card:hover .face.face2 h4 {
  justify-content: center; 
  font-size: 100%;
  margin: auto;
  padding-top: 20px;
}
body .container .card:nth-child(1) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
body .container .card:nth-child(2) .face.face2 {
  background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%);
  border-radius: 15px;
}
body .container .card:nth-child(3) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
body .container .card:nth-child(4) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
body .container .card:nth-child(5) .face.face2 {
  background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%);
  border-radius: 15px;
}
body .container .card:nth-child(6) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
  
  img:hover {
    display: none;
}
  
  .token{
    text-align: center;
  }

</style>

<div class="container">

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="java">We assist you with launching your own Security Token, Equity Token, and/or Utility Token Offering.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205540-bc1a2e4d-b0eb-4455-8f0d-132c76fe5e73.png"/>
      <h4>Tokenization</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;" class="python">From implementing business processes to effective and efficient business models we assist clients to plug the leaks and stop the inefficiencies.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style="width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205607-81ae512c-9f2a-4288-bacb-7101330bcf21.png"/>
      <h4 >Business Development</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="cSharp">We offer best practices for handling blockchain and digital assets. Our knowledge ranges from storage basics to industry leading security innovations.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205681-57acd564-9d10-4847-879a-45ac1ec6780c.png"/>
      <h4>Storage & Security</h4>
      </div>
    </div>
  </div>
<!--</div>
<div class="container">-->

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="java">Experts in the non-fungible token space, we can help you create any type of digital item.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205573-0e68ec7c-36c1-44c9-8c68-609865e4f37e.png"/>
      <h4>Non-Fungible Tokens (NFTs)</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="python">Experienced in compliance and regulation, our industry knowledge gives you access to the resources required to navigate through this critical step. There is no better way to learn than from others who have walked a similar path.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205634-f465c702-3f3f-4a6b-8379-f2005f4462b0.png"/>
      <h4>Regulatory Compliance</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="cSharp">We offer private coaching sessions designed to empower you to create and manage your own global digital assets.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205707-80c66a6c-0fd1-4a7b-8c1a-e5e40a5f1881.png"/>
      <h4>Executive On-Boarding</h4>
      </div>
    </div>
  </div>
</div>

 

1.PNG

Link to comment
On 2/3/2022 at 6:04 AM, defistrategies said:

Site URL: https://www.defistrategies.com/consulting

So I have inserted code I have been working on but now it wont justify in the center when that's what I have coded to my knowledge. It also affects the heading that is text from squarespace. The other issue is that it isnt off centered in an external coding platforms.

<html lang="en">
  
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {

  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #141d2f;
  flex-wrap: wrap;
}
body .container {
  width: 100%;
  padding: 20px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
  margin:0 auto;
  flex-wrap: wrap;
}

  @media screen and (max-width: 1150px){
    body .container{
      display: flex;
    }
  }
  
body .container .card {
  position: relative;
  width: 300px;
  height:400px;
  background: #4cb5ff;
  border-radius: 15px;
  box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  margin: 0 auto;
}
body .container .card .face {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
body .container .card .face.face1 {
  box-sizing: border-box;
  padding: 20px;
}
body .container .card .face.face1 h2 {
  margin: 0;
  padding: 0;
}
body .container .card:hover .face.face2 img {
   display: none;
}
body .container .card .face.face1 .java {
  background-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .container .card .face.face1 .python {
  background-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .container .card .face.face1 .cSharp {
  background-color: #000000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
body .container .card .face.face2 {
  transition: 0.5s;
}
body .container .card .face.face2 h2 {
  margin: 0;
  padding: 0;
  font-size: 10em;
  color: #fff;
  transition: 0.5s 0.5s;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
body .container .card:hover .face.face2 {
  height: 60px;
  }
  
body .container .card:hover .face.face2 h4 {
  justify-content: center; 
  font-size: 100%;
  margin: auto;
  padding-top: 20px;
}
body .container .card:nth-child(1) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
body .container .card:nth-child(2) .face.face2 {
  background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%);
  border-radius: 15px;
}
body .container .card:nth-child(3) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
body .container .card:nth-child(4) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
body .container .card:nth-child(5) .face.face2 {
  background-image: linear-gradient(40deg, #0096FF 0%, #4CB5FF 45%, #0069B2 100%);
  border-radius: 15px;
}
body .container .card:nth-child(6) .face.face2 {
  background-image: linear-gradient(40deg, #0069B2 0%, #0096FF 45%, #4CB5FF 100%);
  border-radius: 15px;
}
  
  img:hover {
    display: none;
}
  
  .token{
    text-align: center;
  }

</style>

<div class="container">

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="java">We assist you with launching your own Security Token, Equity Token, and/or Utility Token Offering.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205540-bc1a2e4d-b0eb-4455-8f0d-132c76fe5e73.png"/>
      <h4>Tokenization</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;" class="python">From implementing business processes to effective and efficient business models we assist clients to plug the leaks and stop the inefficiencies.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style="width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205607-81ae512c-9f2a-4288-bacb-7101330bcf21.png"/>
      <h4 >Business Development</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="cSharp">We offer best practices for handling blockchain and digital assets. Our knowledge ranges from storage basics to industry leading security innovations.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205681-57acd564-9d10-4847-879a-45ac1ec6780c.png"/>
      <h4>Storage & Security</h4>
      </div>
    </div>
  </div>
<!--</div>
<div class="container">-->

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="java">Experts in the non-fungible token space, we can help you create any type of digital item.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205573-0e68ec7c-36c1-44c9-8c68-609865e4f37e.png"/>
      <h4>Non-Fungible Tokens (NFTs)</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="python">Experienced in compliance and regulation, our industry knowledge gives you access to the resources required to navigate through this critical step. There is no better way to learn than from others who have walked a similar path.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205634-f465c702-3f3f-4a6b-8379-f2005f4462b0.png"/>
      <h4>Regulatory Compliance</h4>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <span class="stars"></span>
        <p style="font-weight: bold;"class="cSharp">We offer private coaching sessions designed to empower you to create and manage your own global digital assets.</p>
      </div>
    </div>
    <div class="face face2">
      <div class="token">
      <img style=" width: 70%; margin-top:3em;"src="https://user-images.githubusercontent.com/97566770/150205707-80c66a6c-0fd1-4a7b-8c1a-e5e40a5f1881.png"/>
      <h4>Executive On-Boarding</h4>
      </div>
    </div>
  </div>
</div>

 

1.PNG

It seems fine on your site. 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.