[Duda] Navegando entre paginas

No entiendo porque en mi pantalla principal se muestra el footer en la parte inferior como realmente deberia, pero si muevo la ventana de la pagina a mi otra pantalla, esta el footer pero abajo de eso hay una franja negra.

Pantalla principal Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad Mi otra pantalla Pero si por ejemplo cambio en mi codigo el padding a 10% 15%, si se adapta a las dos pantallas se podria decir. Este es mi codigo actual: (y solo se adapta a la pantalla principal si esta está en pantalla completa, ya que si lo hago mas pequeño el fotter como que se sube y deja la franja negra)

.presentacion {
    padding: 7% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Lo que quiero saber es porque sucede esto, es bueno o malo? Sucede porque las pantallas tienen dimensiones diferentes? no lose, esa es mi duda, ya que por ejemplo en el video ponen: padding: 6% 15%;, y yo cuando pongo eso tengo la franja negra en la parte inferior de ambas pantallas

¡Hola Fabian, espero que estés bien!

Entiendo tu confusión con el comportamiento del footer en diferentes pantallas. Parece que el problema está relacionado con las dimensiones de las pantallas y cómo se está manejando el padding en tu código.

Cuando utilizas porcentajes para el padding, este se calcula en relación al ancho del elemento contenedor, lo que puede causar que se vea diferente en pantallas con distintas dimensiones. En tu caso, al cambiar el padding a 10% 15%, es posible que se adapte mejor a ambas pantallas porque el porcentaje se está calculando de manera diferente.

Una forma de abordar este problema sería utilizar unidades de medida más específicas, como píxeles, para el padding, de manera que tengas un mayor control sobre cómo se ve en diferentes pantallas. Por ejemplo:

.presentacion {
    padding: 20px 30px; /* Ejemplo de valores en píxeles */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Además, es importante considerar el diseño responsivo para que tu página se adapte a diferentes tamaños de pantalla. Puedes utilizar media queries en tu CSS para aplicar estilos específicos según el tamaño de la pantalla.

Espero que estas sugerencias te ayuden a resolver el problema. Recuerda que el diseño web responsivo es fundamental para brindar una buena experiencia al usuario en cualquier dispositivo.

¡Espero haber ayudado y buenos estudios!