In the mobile version of Safari, my <div> footer block crawls onto other elements (see photo), no matter how I tried to make it. And through HTML , and through CSS , it still crawls. How can this be fixed? To, if it starts to crawl, then scrolling appears and they do not mix enter image description here

 .erm { width: 100px; position: absolute; margin: auto; top: 10px; left: 0; right: 0; } .copyright { font-family: Courier New, monospace; color: #424242; font-size: 13px; text-align: center; position: absolute; left: 0; bottom: 0; width: 100%; } .round { width: 150px; border-radius: 100px; position: absolute; margin: auto; top: 150px; left: 0; right: 0; -webkit-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.20); -moz-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.20); box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.20); } .icon-social { width: 60px; margin: 0 10px; } .social { width: 248px; position: absolute; margin: auto; top: 430px; left: 0; right: 0; } .sur-name { font-family: 'Orbitron', sans-serif; font-size: 30px; position: absolute; top: 330px; margin: auto; left: 0; right: 0; text-align: center; } .dev { font-family: 'Bangers', cursive; font-size: 20px; position: absolute; top: 370px; margin: auto; left: 0; right: 0; text-align: center; color: #afafaf; } 
 <!DOCTYPE html> <html> <head> <title>MySite</title> <meta name="robots" content="index,follow"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="/images/browser_icon.png" type="image/png"> <meta name="viewport" content="width=device-width"> <link href="https://fonts.googleapis.com/css?family=Bangers|Orbitron:900" rel="stylesheet"> </head> <body bgcolor="#ffffff"> <img src="images/erm.png" class="erm"> <img src="images/photo.png" class="round"> <div class="sur-name">My name</div> <div class="dev">information</div> <div class="social"> <a href="javascript:PopUpShow()"><img src="images/email.png" class="icon-social"></a> <a href="https://vk.com" target="_blank"><img src="images/vk.png" class="icon-social"></a> <a href="https://www.instagram.com" target="_blank"><img src="images/instagram.png" class="icon-social"></a> </div> <div class="copyright">Copyright © 2017 All rights reserved</div> </body> </html> 

  • try to reduce the top s of all higher-level elements, what is the screen of your test device? - CoffeJava
  • @CoffeJava, iphone 5S, 640x1136 - NTP
  • I tried your code on the simulator of a mobile browser and on a real device (but not on a yabokofone), reducing the top-s got a very decent result. And if your page is not dynamically filled (comments, etc.) then this is the easiest option. IMHO :) - CoffeJava

0