Soy muy nuevo en la codificación, pero decidí hacer un sitio web de práctica personal. Mi página se ve bien en mi computadora, pero cuando la veo en un teléfono o cambio el tamaño de mi página verticalmente, todo mi contenido comienza a superponerse. ¿Cómo puedo evitar que se superponga?
He leído que podría ser un problema tener una position: absolute; en mi código, pero no estoy seguro de cómo lo reemplazaría.
<head> <style> .logo { color: white; font-size: 2em; font-weight: bolder; } a:link { color: white; } a:visited { color: white; } body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; display: block; } .centered { position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); } .logosize { font-size: 2em; letter-spacing: -5px; } .lower-center { position: absolute; top: 55%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); line-height: 18px; text-align: center; } .location-text { font-size: 15px; } footer { text-decoration: none; font-size: 1em; position: absolute; bottom: 0; width: 97%; height: 4rem; display: flex; justify-content: center; } .footer ol { display: flex; list-style: none; } .footer ol li {margin: 1em;} .footer ol li a{ text-decoration: none; } .footer ol li a:hover {color: rgb(83, 54, 150);} </style> </head> <body> <div class="centered logosize"> <p class="logo" id="typewriter">daniel m.</p> </div> <div class="lower-center location-text"> <p><span style='font-size:13px;'>📍</span> las vegas <br>web developer _ creator</p> </div> </body> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer> </html>Primero, asegúrese de tener las siguientes líneas en la etiqueta <head> :
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge">Estos permiten la capacidad de respuesta.
Luego, en la etiqueta <body> :
<div class="logosize"> <span class="logo" id="typewriter">daniel m.</span> </div> <div class="lower-center location-text"> <span> <span style='font-size:13px;'>📍</span> las vegas </span> <span>web developer _ creator</span> </div> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer> Tenga en cuenta que <footer> también debe estar en <body> . El resto del código aquí es el mismo, excepto que eliminé algunas etiquetas innecesarias.
Y finalmente cambios en el CSS:
body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; /* Instead of display: block; Add the below lines: */ height: 100vh; /* So body will have the full screen height */ display: flex; flex-direction: column; justify-content: center; align-items: center; /* And the tags inside the body ie 2 divs and 1 footer - these will be aligned in a column and will be centered horizontally and vertically */ } .centered {} /* No need of this */ .lower-center { display: flex; flex-direction: column; justify-content: center; align-items: center; /* With this, the 2 span's in this div will be aligned in a column and will be centered horizontally and vertically. */ }Es mejor agregar todos los elementos del título dentro del <div> centrado verticalmente para evitar la superposición.
A medida que cambia el tamaño de la pantalla, el <div> centrado se reposicionará de acuerdo con los cambios realizados. Pero lo que hay dentro del <div> no cambiará. Piénselo como un componente o una pieza de un rompecabezas, lo estructura como desee y luego la pieza responde como un todo a los cambios externos.
Pruebe el siguiente fragmento:
.logo { color: white; font-size: 2em; font-weight: bolder; } a:link { color: white; } a:visited { color: white; } body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; } .centered { display:inline-block; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); text-align:center; } .logosize { font-size: 2em; letter-spacing: -5px; } .lower-center { position: absolute; top: 55%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); line-height: 18px; text-align: center; } .location-text { font-size: 15px; } footer { text-decoration: none; font-size: 1em; position: absolute; bottom: 0; width: 97%; height: 4rem; display: flex; justify-content: center; } .footer ol { display: flex; list-style: none; } .footer ol li {margin: 1em;} .footer ol li a{ text-decoration: none; } .footer ol li a:hover {color: rgb(83, 54, 150);} <body style="vertical-align: middle;"> <!--------- centered element --------> <div class="centered"> <div class="logosize"> <span class="logo" id="typewriter">daniel m.</span> </div> <div class="location-text"> <p><span style='font-size:13px;'>📍</span> las vegas <br>web developer _ creator</p> </div> </div> <!-----------------------------------> </body> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer>Dado que conoce display: flex , usaría eso. Definitivamente es mejor que el enfoque de posición absoluta porque los elementos en un cuadro flexible no colisionarán.
Aquí está la solución que se me ocurrió usando Flexbox, tenga en cuenta algunas cosas:
.centered css<div class="centered"> alrededor de los dos divs que originalmente tenían una clase centrada<body> , así que moví el <footer> dentro del cuerpo .logo { color: white; font-size: 2em; font-weight: bolder; } a:link { color: white; } a:visited { color: white; } body { background-color: black; color: white; font-family: Arial, Helvetica, sans-serif; display: block; } .logosize { font-size: 2em; letter-spacing: -5px; } .centered { display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; } .location-text { font-size: 15px; } footer { text-decoration: none; font-size: 1em; height: 4rem; display: flex; justify-content: center; } .footer ol { display: flex; list-style: none; } .footer ol li {margin: 1em;} .footer ol li a{ text-decoration: none; } .footer ol li a:hover {color: rgb(83, 54, 150);} <html> <head> </head> <body> <section class="centered"> <div class="logosize"> <p class="logo" id="typewriter">daniel m.</p> </div> <div class="location-text"> <p><span style='font-size:13px;'>📍</span> las vegas <br>web developer _ creator</p> </div> <footer class="footer"> <ol> <li><a href="https://instagram.com/_ddmm"><img class="instagram-icon" src="images/instagram-icon.png"></a></li> <li><a href="https://twitter.com/_DDMM"><img class="twitter-icon" src="images/twitter-icon.png"></a></li> <li><a href="https://github.com/dannymaclaughlin"><img class="github-icon" src="images/github-icon.png"></a></li> </ol> </footer> </section> </body> </html>