0

Estoy haciendo el maquetado de una interfaz para un tablero de ajedrez. Por el momento la versión para móviles va muy bien, pero al maximizar la ventana, hay un espacio en blanco entre la segunda y tercera sección, literalmente se ve así:

introducir la descripción de la imagen aquí

Por otro lado, quisiera que la primera y tercera sección se ajustaran a lo ancho de la segunda, o sea, en la versión para móviles se ve así:

introducir la descripción de la imagen aquí

Pero al maximizar la ventana, las secciones rojas, son disparejas al tablero. Literalmente me gustaría que todo quedara en un cuadrado, donde el tablero defina el tamaño de la primera y tercera sección:

introducir la descripción de la imagen aquí

Por lo que he investigado, todo podría quedar en una sola sección, y me puse manos a la obra pero termino con el mismo resultado. No sé qué estoy haciendo mal. Adjunto mi código:

.perfil2 {
    grid-area: perfil2; 
    display: flex;
    background-color: #af3232;
    font-family: "Montserrat Alternates", sans-serif;
    align-items: center;
    border-radius: 4px;
}

.tablero {
    grid-area: tablero;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    background: repeating-conic-gradient(#c54411 0% 25%, #afc6d8 0% 50%) 50% / 25% 25%; /* Esto define el color de las casillas */
    aspect-ratio: 1/1;
    max-height: calc(100vh - 200px);
    align-items: center;
    justify-content: center;
    text-align: center;
    border: thin 1px solid;
    margin: 0 auto;
}

.perfil1 {
    grid-area: perfil1;
    display: flex;
    background-color: #af3232;
    font-family: "Montserrat Alternates", sans-serif;
    align-items: center;
    border-radius: 4px;
}
    <section class="perfil2">
        <div><img class="foto2" src="#" href="#"></div>
        <div class="nick2"><a>Nick</a></div>
        <div class="tiempo2">Tiempo2</div>
    </section>

    <section class="tablero">
        <div class="box">&#9820;</div>
        <div class="box">&#9822;</div>
        <div class="box">&#9821;</div>
        <div class="box">&#9819;</div>
        <div class="box">&#9818;</div>
        <div class="box">&#9821;</div>
        <div class="box">&#9822;</div>
        <div class="box">&#9820;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">1</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9823;</div>
        <div class="box">&#9820;</div>
        <div class="box">&#9822;</div>
        <div class="box">&#9821;</div>
        <div class="box">&#9819;</div>
        <div class="box">&#9818;</div>
        <div class="box">&#9821;</div>
        <div class="box">&#9822;</div>
        <div class="box">&#9820;</div>
    </section>          

    <section class="perfil1">
            <div><img class="foto1" src="#" href="#"></div>
            <div class="nick1"><a>Nick</a></div>
            <div class="tiempo1">Tiempo1</div>
    </section>


Revisando unas configuraciones de la página web, resulta que tenía un height demás en la propiedad del body.

body {
    height: 100%;
    background-color: rgb(20, 82, 124); }

Lo único que hice fue eliminar el height, ya que este determinaba que todos los elementos dentro del body iban a estar en su altura máxima del cuerpo. Al eliminarlo, todos los elementos se ajustan a su contenido.

Esta pequeña parte como bien lo mencionaba, la solucioné, quitando el "height", quedando únicamente:

body {
    background-color: rgb(20, 82, 124); }

Aún falta que los otros dos elementos div denominados como perfil2 y perfil1 (los divs de color rojo) se adapten a lo ancho del tablero de ajedrez.

Solo comparto esto para darle un seguimiento al tema.

1
  • No olvides aceptar la respuesta que te ha sido más útil.
    – padaleiana
    Commented el 4 nov. 2022 a las 10:07

2 respuestas 2

0

modifica el selector .tablero{} por este codigo:

.tablero {
    width: 97.5%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    background: repeating-conic-gradient(#c54411 0% 25%, #afc6d8 0% 50%) 50% / 25% 25%; /* Esto define el color de las casillas */
    aspect-ratio: 1/1;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: thin 1px solid;
    margin: 0 auto;
}

Creo que es lo que buscas, pero si no es exactamente eso solo menciónalo y lo modifico.

8
  • Lo intente, y al ejecutarlo con el emulador para dispositivos móviles, se hacen rectángulos, gracias por la atención :)
    – Corso94
    Commented el 3 nov. 2022 a las 3:37
  • como que se hacen rectangulos? que es lo que se hace rectangulo? Commented el 3 nov. 2022 a las 3:41
  • Si, literalmente, al poner el código que me proporciono, los cuadrados del tablero, tienen un aspecto rectangular: ibb.co/c6L6j5S
    – Corso94
    Commented el 3 nov. 2022 a las 3:43
  • pues la verdad no se que esta ocurriendo, fijate que elimine algunas propiedades que tenias. Estoy usando una extension del navegador para ver la pagina desde un IPhone SE 2016 y se ve bien ibb.co/xSh9RS3 Commented el 3 nov. 2022 a las 4:06
  • y lo estoy probando con mas de 1 dispositivo Commented el 3 nov. 2022 a las 4:07
0

Lo pude resolver: únicamente pasé la propiedad grid con las demás del tablero, pero la que hace la magia es:

max-height: calc(100vh - 150px);

Pasé a los elementos perfil2 y perfil1, y asunto resuelto.

Ahora se ve así:

introducir la descripción de la imagen aquí

Y mi código se ve así:

.perfil2 {
    display: grid;
    grid-template-columns: 3fr 1fr 4fr;
    grid-template-rows: 1fr;
    max-width: calc(100vh - 150px);
    padding: 10px;
    margin: auto;
    background-color: #af3232;
    font-family: "Montserrat Alternates", sans-serif;
}

.tablero {
    grid-area: tablero;
    display: grid;
    grid-template-columns: repeat(8, 1fr); /* Es para crear 8 columnas */
    grid-template-rows: repeat(8, 1fr); /* Es para crear 8 filas */
    background: repeating-conic-gradient(#c54411 0% 25%, #afc6d8 0% 50%) 50% / 25% 25%; /* Esto define el color de las casillas */
    aspect-ratio: 1/1; /* Permite que las columnas y filas mantengan la misma medida, produciendo cuadrados */
    max-height: calc(100vh - 150px); /* Permite que la pagina web sea responsive */
    margin: auto; /* Esto es para centrar el tablero */
    border: thin 1px solid;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.perfil1 {
    display: grid;
    grid-template-columns: 3fr 1fr 4fr;
    grid-template-rows: 1fr;
    max-width: calc(100vh - 150px);
    padding: 10px;
    margin: auto;
    background-color: #af3232;
    font-family: "Montserrat Alternates", sans-serif;
}

Ahora terminaré de maquetar esta sección.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.