物品不断离开他们想要的地方

时间：2018-11-09 10:03:39

标签： javascript html css flexbox

正如标题所述，该项目不断离开我所设定的位置。当屏幕放大到125％时，该问题导致网站无法响应。

您可能会看到该网站的结果-http://joshuacote.xyz/ 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #272727;
  font-family: 'Krub', sans-serif;
  position: relative;
  color: white;
}

a {
  text-decoration: none;
  text-transform: uppercase;
}


::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #272727;
}

::-webkit-scrollbar-thumb {
    background: #2DE683;
}

::-webkit-scrollbar-thumb:hover {
    background: #19d16b;
}


/* Center the loader */
#loader {
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 250px;
  font-size: 120px;
}

.span3 {
    display: inline-block;
    animation: pulse 0.4s alternate infinite ease-in-out;

    &:nth-child(odd) {
      animation-delay: 0.4s;
    }
  }

  @keyframes pulse {
  to {
    transform: scale(0.8);
    opacity: 0.5;
  }
}


@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}


/* END OF IMPORTANT */


#home {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-image: url("https://cdn.discordapp.com/attachments/460589770570072078/508360909627064321/Path_11.svg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
}

.navigation {
  background-color: white;
  padding: 15px 30px;
  border-radius: 50px;
  transition: 0.5s;
}

.navlink {
  color: #272727;
  padding: 0px 10px;
}

.navlink:hover {
  font-weight: 700;
  transition: 0.3s;
}

.brand {
  font-size: 48px;
  font-weight: 900;
}
/* ABOUT SECTION */

#about {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;

  background-repeat: no-repeat;
  background-position: left;
}

.about {
  width: 40%;
  text-align: left;
  transition: 0.5s;
}

.para {
  color: #888888;
}

.abouttitle {
  font-size: 48px;
  font-weight: 900;
}

hr {
  color: #2DE683;
  background-color: #2DE683;
  border: none;
  width: 20%;
  padding: 2px 20px;
  margin-bottom: 20px;
}


/* PORTFOLIO */

#portfolio {
  width: 100%;
  height: 150vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
}

.aboutport {
  font-size: 48px;
  font-weight: 900;
}

.porthr {
  color: #2DE683;
  background-color: #2DE683;
  border: none;
  width: 10%;
  padding: 2px 20px;
  margin-bottom: 20px;
}


.imageport {
  margin: 10px 10px;
  transition: 0.3s;
}

.imageport:hover {
  opacity: 0.3;
  transition: 0.3s;
  border: 5px solid #2DE683;
  padding: 10px 10px;
}


.port1 {
  position: absolute;
  margin-top: -190px;
  margin-left: 150px;
  font-weight: 900;
  font-size: 40px;
  visibility: hidden;
  cursor: default;
}

.port1V {
  position: absolute;
  margin-top: -190px;
  margin-left: 150px;
  font-weight: 900;
  font-size: 40px;
  visibility: visible;
  cursor: default;
}


.port2 {
  position: absolute;
  margin-top: -190px;
  margin-left: 730px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port2V {
  position: absolute;
  margin-top: -190px;
  margin-left: 675px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}


.port3 {
  position: absolute;
  margin-top: -190px;
  margin-left: 185px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port3V {
  position: absolute;
  margin-top: -190px;
  margin-left: 185px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}

.port4 {
  position: absolute;
  margin-top: -190px;
  margin-left: 750px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port4V {
  position: absolute;
  margin-top: -190px;
  margin-left: 750px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}

.port5 {
  position: absolute;
  margin-top: -190px;
  margin-left: 150px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port5V {
  position: absolute;
  margin-top: -190px;
  margin-left: 150px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}

.port6 {
  position: absolute;
  margin-top: -190px;
  margin-left: 760px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port6V {
  position: absolute;
  margin-top: -190px;
  margin-left: 760px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}

.port4 {
  position: absolute;
  margin-top: -190px;
  margin-left: 750px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port4V {
  position: absolute;
  margin-top: -190px;
  margin-left: 750px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}

.port2 {
  position: absolute;
  margin-top: -190px;
  margin-left: 730px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: hidden;
}

.port2V {
  position: absolute;
  margin-top: -190px;
  margin-left: 675px;
  font-weight: 900;
  font-size: 40px;
  cursor: default;
  visibility: visible;
}




/* CONTACT */

#contact {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

  background-image: url("https://cdn.discordapp.com/attachments/460589770570072078/508033443452551190/Path_12.svg");
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
}


.contact {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  margin-left: 50px;
  text-align: center;
  color: white;
  font-weight: 900;
  padding: 50px 100px;
  background-color: #383838;
  border-radius: 15px;
  text-transform: uppercase;
  transition: 0.5s;

}

.box2 {
  padding: 50px 105px;
}

span {
  color: #2DE683;
}

.sizer {
  font-size: 88px;
  color: white;
}


.touch {
  font-size: 38px;
  background-color: #323232;
  border-radius: 50px;
  padding: 10px 20px;
}

.box:hover {
  transition: 0.5s;
  transform: scale(1.02);
  box-shadow: 8px 8px #323232;
}

/* FOOTER */

.footer {
  padding: 10px 80px;
  margin: 0 auto;
}

.copy {
  text-align: left;
  opacity: 0.6;
}


@media only screen and (max-width: 1095px) {
  .navigation {
    font-size: 48px;
  }

  .about {
    font-size: 38px;
    width: 80%;
    text-align: center;
  }

  hr {
    margin: 0 auto;
    padding: 5px 10px;
    margin-bottom: 50px;
  }

  #Portfolio {
    margin: 0 auto;
  }

  .porthr {
    padding: 5px 10px;
  }

  #contact {
    margin: 0 auto;
  }

  .imageport {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
  }

  .contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
  }

  .touch {
    font-size: 78px;
    margin: 30px;
  }

  .sizer {
    font-size: 100px;
  }

  .context {
    font-size: 38px;
  }

  .box {
    margin-top: 50px;
  }

  .port6 {
    position: absolute;
    margin-top: -190px;
    margin-left: 190px;
    font-weight: 900;
    font-size: 40px;
    cursor: default;
    visibility: hidden;
  }

  .port6V {
    position: absolute;
    margin-top: -190px;
    margin-left: 190px;
    font-weight: 900;
    font-size: 40px;
    cursor: default;
    visibility: visible;
  }

  .port4 {
    position: absolute;
    margin-top: -190px;
    margin-left: 170px;
    font-weight: 900;
    font-size: 40px;
    cursor: default;
    visibility: hidden;
  }

  .port4V {
    position: absolute;
    margin-top: -190px;
    margin-left: 170px;
    font-weight: 900;
    font-size: 40px;
    cursor: default;
    visibility: visible;
  }

  .port2 {
    position: absolute;
    margin-top: -190px;
    margin-left: 95px;
    font-weight: 900;
    font-size: 40px;
    cursor: default;
    visibility: hidden;
  }

  .port2V {
    position: absolute;
    margin-top: -190px;
    margin-left: 95px;
    font-weight: 900;
    font-size: 40px;
    cursor: default;
    visibility: visible;
  }
}
<html><head>
    <title>Joshua Cote</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Krub" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <meta name="author" content="Joshua Cote">
    <meta name="description" content="This is Joshua. I''m a full stack web developer to serve great people like you, and fulfill what your dream used to be! I''m always up for new challenges and ready to serve new clients!">

    <link rel="icon" type="image/png/ico" href="https://i.imgur.com/hWKM95c.gif">
  </head>

<body onload="myFunction()" cz-shortcut-listen="true">

  <div id="loader" style="display: none;">
    <span class="span3">{</span><span class="span3">}</span>
  </div>

  <div class="Body animate-bottom" id="myDiv" style="display: block;">
  <div id="home">

    <p class="brand">JOSHUA COTE</p>

    <div class="navigation">
      <a href="#" class="navlink">Home</a>
      <a href="#about" class="navlink">About</a>
      <a href="#portfolio" class="navlink">Portfolio</a>
      <a href="#contact" class="navlink">Contact</a>
    </div>


   </div>

   <div id="about">

     <div class="about">
       <p class="abouttitle">ABOUT ME</p>
       <hr>

        <p class="para">
          Hey, I'm Joshua Cote. (Known as Josh or Joshua).  I'm a full-stack web developer from the mighty state of California.
          I spealize in Management, Advising, Producing, Directing and also Coding!. Its always been a pleasure to learn more
          about new things that's been happening around from me A to Z of what are my hobbies! I'm also the owner of HTHoldings
          also a holdings company located in the California.
          <br><br>
          I'm also a Computer Student as it comes in one of my hobbies and whenever there's something techy you'll find me there.
          All of my hobbies brings me a new experience each day, and I'm enjoying all of it since day one! Well that's all about me.
       </p>
      </div>

    </div>


    <div id="portfolio">
      <p class="aboutPort">PORTFOLIO</p>
      <hr class="porthr">

      <div clas="port">
        <img src="http://joshuacote.xyz/assets/images/hydroxweb.png" width="550px" height="300px" class="imageport" id="p1">
        <p class="port1" id="p1t">Hydrox Hosting</p>


        <img src="https://i.gyazo.com/4add5335993b7c88106d6bd14a147027.png" width="550px" height="300px" class="imageport" id="p2">
        <p class="port2" id="p2t">Errand Technologies</p>
      </div>

      <div clas="port">
        <img src="http://joshuacote.xyz/assets/images/ortixweb.png" width="550px" height="300px" class="imageport" id="p3">
        <p class="port3" id="p3t">Team Ortix</p>

        <img src="https://i.gyazo.com/be0d77a373c3fb23f9473951710154f1.png" width="550px" height="300px" class="imageport" id="p4">
        <p class="port4" id="p4t">Jordan Soffer</p>
      </div>

      <div clas="port">
        <img src="https://i.gyazo.com/f56af7380026e3907b3c264f664443fb.png" width="550px" height="300px" class="imageport" id="p5">
        <p class="port5" id="p5t">Aditya Diwakar</p>

        <img src="https://i.gyazo.com/caf7c99b76c484b773ffa4368c29d161.png" width="550px" height="300px" class="imageport" id="p6">
        <p class="port6" id="p6t">Devil Node</p>
      </div>

    </div>


    <div id="contact">

      <div class="contact">
        <p class="touch">Let's get in <span>touch?</span></p>

        <a href="https://discord.gg/C5p37XZ"><div class="box box2">
          <i class="fab fa-discord sizer"></i>
          <p class="context">Discord</p>
        </div></a>

        <a href="mailto:business@joshuacote.xyz"><div class="box">
          <i class="fas fa-envelope sizer"></i>
          <p class="context">Email</p>
        </div></a>
      </div>

     </div>

     <div class="footer">
       <p class="copy"> © Cote 2018. Made by <span>Joshua Cote</span> (ofcourse).</p>
     </div>

   </div>

<script>
var myVar;

function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
};

  document.getElementById('p1').onmouseover = function() {
    document.getElementById('p1t').className = 'port1V';
};

document.getElementById('p1').onmouseout = function() {
  document.getElementById('p1t').className = 'port1';
};

document.getElementById('p2').onmouseover = function() {
  document.getElementById('p2t').className = 'port2V';
};

document.getElementById('p2').onmouseout = function() {
document.getElementById('p2t').className = 'port2';
};

document.getElementById('p3').onmouseover = function() {
  document.getElementById('p3t').className = 'port3V';
};

document.getElementById('p3').onmouseout = function() {
document.getElementById('p3t').className = 'port3';
};

document.getElementById('p4').onmouseover = function() {
  document.getElementById('p4t').className = 'port4V';
};

document.getElementById('p4').onmouseout = function() {
document.getElementById('p4t').className = 'port4';
};

document.getElementById('p5').onmouseover = function() {
  document.getElementById('p5t').className = 'port5V';
};

document.getElementById('p5').onmouseout = function() {
document.getElementById('p5t').className = 'port5';
};

document.getElementById('p6').onmouseover = function() {
  document.getElementById('p6t').className = 'port6V';
};

document.getElementById('p6').onmouseout = function() {
document.getElementById('p6t').className = 'port6';
};


</script>



</body></html>

我很确定它在flexbox上的用法，但是我已经尝试了大多数方法。

这是引起问题的原因-

https://i.gyazo.com/2db36c2f2c219968b48bc7ddb6c075b2.png

这里是CodePen。这些东西在CodePen中仍然更加混乱。

1 个答案:

答案 0 :(得分：0)

从OP现在删除的编辑中选择问题：

  

与此有关的问题是height: 100px;，它允许东西离开原位并进入另一部分。我将其更改为min-height: 100px;，并且可以正常工作。

相关问题
最新问题