@saul-gustavo
Posted
Hola vi tu código y se entiende lo que querías hacer, te sugiero que pongas los media querys en el mismo archivo css, así será más fácil de leer tu código, También te recomiendo que para centrar adecuadamente un container, en este caso el main principal, uses lo siguiente:
.contenedor-principal {
display: flex;
justify-content: center;
align-content: center;
width: 100%;
min-height: 100vh;
}
Esto hará que el main se centre de manera adecuada, y en el .contenedor-secundario, puedes usar lo siguiente:
.contenedor-secundario {
width: 100%;
max-width: 500px;
}
Esto hará que el contenedor abarque el 100% pero que no pase de los 500px, puedes usar más pixeles para darle la forma adecuada como esta en la imagen del diseño.
También te recomiendo mucho que veas otras soluciones dentro de la plataforma de frontendmentor para que te des una idea de como hacer los diferentes desafios.
¡Happy Coding!
Marked as helpful
@EnrikeOmarFarias
Posted
@Saul-Gustavo Hola Saul, gracias por tu comentario!
Con respecto a los MQ los pongo así para que carguen mas rápido de acuerdo al dispositivo en que se abra la pagina, es decir si los abre en un móvil por ejemplo, solo debería cargar el css para Mobile y no todo el código, ocurre algo similar con las imágenes utilizando la etiqueta de picture y dentro colocando imágenes de distinto tamaño para que las vaya abriendo de acuerdo al dispositivo. Ese seria el motivo por el que use distintos archivos...
