html - How to stop an element from appearing outside it's parent division? -


i have division class "centre" inside division called "parallaxone". css, if view in laptop, showing divisions properly, if view in mobile phone, "centre" division appearing outside "parallaxone" division, , in other browsers, appearing in front of text. why happening, , how correct it? here code:

.centre {    position: absolute;    top: 75%;    left: 50%;    transform: translatey(-15%);    width: 0;    height: 140px;    border-left: 6px dashed #0079a5;  }    .arrow {    position: absolute;    top: 0;       left: -6px;    height: 40px;    width: 6px;    background: #007;    animation: animate 2s infinite;  }    .arrow:before {    content: '';    position: absolute;    bottom: 0;    left: -10px;    width: 20px;    height: 20px;    border-bottom: 6px solid #007;    border-right: 6px solid #007;    transform: rotate(45deg);  }    @keyframes animate {    0% {      transform: translatey(0);      opacity: 0.5;    }    50% {      transform: translatey(70px);      opacity: 1;    }    100% {      transform: translatey(140px);      opacity: 0;    }  }    .container {    max-width: inherit;    margin: 0 auto;    background-color: white;    font-size: 24px;    padding: 25px;  }    .parallaxone {    background: /*url(images/parallax3.jpg); image in computer*/yellow;    text-align: center;    height: 450px;    padding: 2%;    margin: 2% 0;  }    .parallaxone h6 {    color: black;    font-size: 200%;    margin: 8% 30%;    padding-top: 100px;    z-index: -1;  }    .parallaxtwo {    background: /*url('images/parallax2.jpg') no-repeat center; image in computer*/green;    background-size: cover;    background-attachment: fixed;    text-align: center;    height: 600px;    padding: 2%;  }
<html>    <head>      <title>my website</title>     </head>     <body>       <header>         <h1>my website</h1>        </header>        <div class="container">          <div class="parallaxone">            <h3>welcome website!</h3>            <div class="centre">              <div class="arrow"></div>            </div>          </div>          <div class="parallaxtwo">          <p>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>          </div>        </div>     </body>  </html

i'm sorry long code, edited as reproduce same problem.

use tag in head section responsive scaling contents

<meta name="viewport" content="width=device-width, initial-scale=1">     

Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -