Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Duda] Distorsión de la página y de la herramienta del desarrollador.

Referente al curso Arquitectura CSS: descomplicando los problemas, en el capítulo Estilizando Footer y Responsividad y actividad Hacer la página responsiva

por Oniel Alexis Contreras Alcántara
| 55.3k xp | 36 posts

Buenas noches, de vez en cuando el tamaño de la página se distorsiona tomando un tamaño más grande que los proporcionados (desde mi punto de vista), e igualmente esto se refleja en la herramienta del desarrollador donde ocasiona que, por igual, el acercamiento de la página se "estropee" haciendo que, aunque se ponga a 50%, se establezca demasiado cerca, no entiendo porqué la herramienta del desarrollador, y la página en general, algunas veces se me "aloca" y se me presenta así, con un tamaño exagerado que no me permite visualizar el contenido completo de la página, ¿debido a qué puede ocurrir esto?

(Los errores de archivos no encontrados y/o diseños/estilos no tomados son temas aparte; ya que publiqué dichas cuestiones en la cuarta lección del curso, por ello no los menciono.)

Muestra del fallo.

Aquí ninguno de los elementos está sobresaliendo de su ancho, pero de igual manera hay un espacio a la derecha de la página:

Muestra del fallo o problema.

2 respuestas
por Bruno Botelho de Souza
| 3933.7k xp | 14897 posts
Alura Scuba Team Scuba Team | Front-end

Hola Oniel, espero que estés bien.

Necesitaria ver tu código para poder ayudarte.

Puedes lograr compartir haciendo clic en este botón y colocando tu código entre los acentos:

https://cdn1.gnarususercontent.com.br/6/409216/a3962870-1dd0-4f80-a135-54b482f9094a.png

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!
por Oniel Alexis Contreras Alcántara
| 55.3k xp | 36 posts

Buenas tardes maestro, completando el proyecto me di cuenta que, a mi parecer, las versiones del proyecto se afectan unas a otras; ya que, en la versión para computadoras las imágenes de las personas sí sobresalían, por otra parte en la versión para teléfonos no lo hacían y aún así sucedía el fallo anteriormente mencionado (también me puede suceder al contrario como se ve en las capturas de pantalla). No obstante, cuando corregí el problema en la versión para computadoras el fallo dejó de presentarse.

Si, en la herramienta del desarrollador a más de 768px, sustituimos el alto y el ancho en el siguiente código y cambiamos a menos de 768px el fallo descrito aparece:

.persona__imagen {

    height: 300px;
    width: 300px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 100%;
}

https://github.com/OnielC/Proyecto_Fruta_y_Fruto (como el código era muy extenso pensé que sería mejor compartirlo por este medio).

Disculpe si me enredo mucho la idea de mi pregunta es: ¿no se puede evitar dicho fallo (y/u otros que se me presentan como el acercamiento de la página)?