es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Nuevo en el diseño web, problemas de espaciado

Hola, mi nombre es Cole y estoy trabajando en un sitio de portafolio para mi clase de tipografía. Se ve bien, sin embargo, hay un problema evidente. Como puedes ver, mi sitio es experimental y todos los botones son simplemente imágenes con enlaces adjuntos. Cuando reduzco la ventana, las imágenes se deforman y actualmente no quiero que esto suceda. En el mejor de los casos, me gustaría que toda la cabecera se reduzca. ¿Hay alguna manera de lograr esto? Nota aparte, no soy muy bueno con el código.

Mi sitio web: https://colesmxth.com/index.php/allinmyheader/

Este es el problema que tengo: enlace de imagen

Este es el resultado deseado que quiero para todos los tamaños de página del navegador: enlace de imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Hola Cole,

    Gracias por buscar ayuda con tu sitio de cartera. A partir de las imágenes compartidas, puedo ver que el problema que estás enfrentando es que los botones en tu sitio no son responsivos y se aplastan cuando el tamaño de la ventana se reduce.

    Afortunadamente, hay una manera de solucionar esto manteniendo tus botones como imágenes. La solución consiste en establecer el ancho de los botones como un porcentaje en lugar de un valor fijo en píxeles. De esta manera, cuando cambie el tamaño de la ventana, los botones se ajustarán en consecuencia.

    Para lograr esto, puedes agregar el siguiente CSS a tus estilos de botones:

    button {
      width: 20%; /* ajusta este valor según sea necesario */
    }
    

    Esto establece el ancho de los botones en un 20% de su contenedor padre. Puedes ajustar este valor según sea necesario para asegurarte de que los botones se ajusten al diseño que deseas. Además, puedes agregar otras propiedades CSS, como relleno (padding) y márgenes, para personalizar aún más el espacio y el diseño de los botones.

    ¡Espero que esto te ayude! No dudes en contactarme si tienes alguna otra pregunta.

    Saludos,
    [Tu nombre]

Comments are closed.