Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos.

  1. Ajustar el padding en pantallas pequeñas

Reduce el espacio lateral para que el contenido no quede “apretado”.

/* Ejemplo base (ajusta según tu proyecto) */
.presentacion { padding: 5% 10%; }

/* Pantallas pequeñas /
@media (max-width: 720px){
.presentacion{
padding: 24px 5%; /
menos laterales, algo de aire vertical /
gap: 24px; /
por si imagen y texto quedan muy juntos */
}
}

  1. Refinar el ancho de .presentacion__contenido

Haz que el texto se adapte al nuevo padding del contenedor.

/* Desktop (ejemplo) */
.presentacion__contenido{ width: 50%; max-width: 65ch; }

/* Móvil /
@media (max-width: 720px){
.presentacion__contenido{
width: 100%; /
ocupa el ancho disponible dentro del padding /
max-width: 65ch; /
mantiene buena longitud de línea */
}
}

  1. Evaluar width: auto en pantallas pequeñas

Probar auto (valor por defecto en bloques) hace que el ancho se ajuste al contenido del padre (restando el padding del padre). Pruébalo así:

@media (max-width: 720px){
.presentacion__contenido{
width: auto; /* se ajusta al contenido del contenedor */
max-width: 65ch;
}
}

Si ves que el texto queda demasiado ancho, conserva width:100% + max-width:65ch. Si está dentro de un flex, también puedes usar flex: 1 1 100%;.

  1. Crear cuenta en GitHub (resumen rápido)

Ve a github.com → Sign up.

Ingresa email, contraseña, username y completa verificación.

Ajusta Profile (avatar, bio) y Settings (2FA recomendado).

Explora: Repositories, Pull requests, Issues, GitHub Pages.

  1. Subir tu proyecto a GitHub
    Opción A — Desde la web (sin Git local)

New repository → nombre (p. ej., mi-portafolio) → Create repository.

En el repo, Add file → Upload files → arrastra tu carpeta (HTML/CSS/JS) → Commit changes.

Opción B — Con Git en tu equipo

En la carpeta del proyecto:

git init
git add .
git commit -m "Primer commit: portafolio"
git branch -M main
git remote add origin https://github.com/TU_USUARIO/mi-portafolio.git
git push -u origin main

Tip: añade un .gitignore (por ejemplo, node_modules/ si usas herramientas) y un README.md.

1 respuesta

Hola David, espero que estés bien

¡Gracias por compartir tu duda! Parece que estás trabajando en un proyecto de diseño web y necesitas ajustar algunos aspectos para mejorar la responsividad en pantallas pequeñas. Vamos a revisar cada uno de los puntos que mencionaste:

  1. Ajustar el padding en pantallas pequeñas: La idea es reducir el espacio lateral para que el contenido no se sienta apretado. Tu ejemplo de CSS es un buen comienzo. Al usar @media (max-width: 720px), estás asegurando que los estilos se apliquen solo en pantallas más pequeñas. Ajustar el padding a 24px 5% es una buena práctica para mantener un poco de aire alrededor del contenido.

  2. Refinar el ancho de .presentacion__contenido: Has hecho bien al ajustar el ancho al 100% en móviles, lo que permite que el contenido use todo el espacio disponible dentro del padding. Mantener max-width: 65ch es útil para asegurar que las líneas de texto no sean demasiado largas, lo que mejora la legibilidad.

  3. Evaluar width: auto en pantallas pequeñas: Probar con width: auto es una buena manera de permitir que el contenido se ajuste dinámicamente. Sin embargo, si notas que el texto se ve demasiado ancho, mantener width: 100% junto con max-width: 65ch es una opción sólida. También puedes considerar usar flex: 1 1 100% si estás trabajando dentro de un contenedor flex.

  4. Crear una cuenta en GitHub: Seguir los pasos que mencionaste te ayudará a establecer una presencia en GitHub, lo cual es esencial para compartir y colaborar en proyectos de desarrollo web.

  5. Subir tu proyecto a GitHub: Tanto la opción A (desde la web) como la opción B (usando Git local) son válidas. Si estás comenzando, la opción A es más sencilla, pero la opción B te dará más control y es útil si planeas trabajar más con control de versiones.

Espero que estas sugerencias te sean útiles para avanzar en tu proyecto. ¡Bons estudos!