Divs are moving around when resizing/zooming-in/out page
Question
If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code And screenshot: Screenshot
<style> /* KEYFRAMES */ /* IDS */ #changepos{ position:relative; top:-250px; } #readmore{ position:relative; top:-260px; right:380px; text-decoration-line:none; border-radius:20px; } #movetext{ position:relative; right:395px; } #wholepage{ width:500px; margin-left:auto; margin-right:auto; } #hello{ position:relative; left:20px; } #hellos{ position:relative; left:100px; } /* Body Visual */ input{ width:50%; overflow:hidden; } main{ background-color:lightgray; min-height: 100%; min-width:100%; background-size:1550px 800px; background-repeat: no-repeat; overflow-x:hidden; } body{ background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80'); min-height: 100%; min-width:100%; background-size:1550px 800px; background-repeat: no-repeat; overflow-wrap:hidden; overflow-x:hidden; } /* Classes */ .typewriter { font-family: Courier, monospace; display: inline-block; } .typewriter-text { display: inline-block; overflow: hidden; letter-spacing: 2px; animation: typing 5s steps(30, end), blink .75s step-end infinite; white-space: nowrap; font-size: 30px; font-weight: 700; border-right: 4px solid orange; box-sizing: border-box; } @keyframes typing { from { width: 0% } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: orange; } } } .forms{ position:relative; left:50px; } .lineh{ border-bottom: 4px solid lightgray; width:1400px; height:3px; cursor:default; position:relative; border-radius:100px; top:-11px; } .lines{ border-bottom: 2px solid none; width:1000px; height:3px; background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg'); cursor:default; position:relative; border-radius:100px; top:-195px; right:400px; } .line{ border-bottom: 2px solid pink; width:1000px; height:3px; background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg'); cursor:default; position:relative; border-radius:100px; } .movepic{ position:relative; left:270px; top: -200px; right:0px; bottom:0px; cursor:default; opacity:1; transition:1s; } .movepic:hover{ transform:translateX(20px); } .joint{ font-family:monospace; font-size:10px; text-decoration-line:none; text-decoration-color:none; text-decoration:none; color:white; } .transp{ position:relative; border-style:solid; border-radius:50px; background-color:none; opacity:0.6; cursor:pointer; border:none; overflow:hidden; transition:1s; border-image-width: 5px; } .transp:hover{ transform:translate(30px); opacity:1; transform-style: preserve-3d; } .container{ text-align: center; margin-top: 360px; } .btn{ border: 1px solid #3498db; background: none; padding: 10px 20px; font-size: 20px; font-family:monospace; cursor: pointer; margin: 10px; transition: 0.8s; position: relative; overflow: hidden; } .btn1,.btn2{ color: #3498db; } .btn3,.btn4{ color: #fff; } .btn1:hover,.btn2:hover{ color: #fff; } .btn3:hover,.btn4:hover{ color: #3498db; } .btn::before{ content: ""; position: absolute; left: 0; width: 100%; height: 0%; background: #3498db; z-index: -1; transition: 0.8s; } .btn1::before,.btn3::before{ top: 0; border-radius: 0 0 50% 50%; } .btn2::before,.btn4::before{ bottom: 0; border-radius: 50% 50% 0 0; } .btn3::before,.btn4::before{ height: 180%; } .btn1:hover::before,.btn2:hover::before{ height: 180%; } .btn3:hover::before,.btn4:hover::before{ height: 0%; } </style>
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title>Roma's Portfolio</title> <link rel="stylesheet" href="../sait/css/main.css"> <link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta http-equiv="refresh" content="350"> <style> .putebi{ width: 100%; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing: border-box; margin-top:6px; margin-bottom:16px; resize:vertical; } .med{ position:relative; outline:none; border-style:none; opacity:0.6; } .med:hover{ opacity:1; } .soc{ animation:socebi 3s; outline:none; border-style:none; } @keyframes socebi{ from{ opacity:0; transform:translateX(-600px); } to{ opacity:1; transform:translateX(0px); } } .kont{ animation: animacia 3s; } @keyframes animacia{ from{ opacity:0; transform:translateX(600px); } to{ opacity:1; transform:translateX(0px); } } </style> </head> <body> <div> <div style="overflow-x:hidden;"id="hello" class="transp"> <a href="index.html"></a> <a href="index.html" class="joint"><h1> Roma's Portfolio</h1> </a> </div> </div> <div class="lineh"></div> <div class="wholepage"> <div style="text-align:center; text-decoration:none"> <a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a> <a style="text-decoration-line:none" class="btn btn1 container">Contact</a> <a style="text-decoration-line:none" class="btn btn1 container">Projects</a> <a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br> <div class="typewriter"> <q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q> </div><br><br> <div style="cursor:default;"class="soc"> <a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br> <a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img class="med" width="50px" src="../sait/images/instagram.png"></a><br> <a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br> </div> <br><br><br> </div> </div> </div> <div id="wholepage"> <div id="movetext" style="color:white; font-family:monospace; font-size:large"> <h2 style="color:#64e873;text-shadow:2px 2px" class="line kont"> Hello!</h2> <br> <h3 class="kont" style="text-align:left; font-size:large;"> I'm Roma. A Freelance Front End Developer based in Georgia. I specialise in creating interactive experiences and functional interfaces.I have worked on a multitude of web and print-baseds projects for a range of clients providing Web Design (Illustrator,Photoshop,Kdenlive) and Development(HTML,CSS,MYSQL,Wordpress).</h3> </div> <div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250" src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div> <div class="changepos lines kont"> </div> <button id="readmore" class="btn btn3 kont">Read More</button><br><br> </div> <div style="position:relative; top:-180px"> <form action=""style="text-align:center"> <h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1> <div class="typewriter"> <h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1> </div><br> <label style="font-family:;"for="saxeli">Enter Username</label> <input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br> <label id="email">Enter Email </label> <input style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="email" type="email" name="email"><br><br> <label for="free">Enter Text </label> <textarea style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px; margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br> <button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button> </form> <img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px" height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg"> </div> </div> <footer> <p style="color:black; ">All Rights Reserved</p> --> </footer> </body> </html>
2 answers
solution1
0 2020-11-18 20:32:21
看起来，背景图片有问题，请尝试background-size: cover ，如果这也不起作用，请使用任何在线编辑器共享更多代码
solution2
0 2020-11-18 20:49:27
该网站没有响应，添加媒体查询以使您的网站在任何设备屏幕尺寸上看起来都不错（您想要的方式）。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
d3.js grid moving around when dragging and zooming
Popup iframe not moving when resizing the page
How can I stop background from moving when zooming out?
MarkerWithLabel moving when zooming
Laptop settings resizing web page pushing divs 'off' the page - is there a way around this via code?
Rest of divs are shown when resizing browser in single page website
Resizing,moving and scaling image and text divs wiith browser resizing
CSS, divs moving around on content update
How to prevent zooming and moving page on mobile browsers?
Moving layer when resizing window
Related Tags