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> </htmli'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
Post a Comment