Как адаптировать его к отзывчивому, не разбивая дизайн ⇐ Html

[Anonymous]

I have the following design:




.cuadro-valores {
z-index:10;
position:relative;
background-blend-mode: multiply;
}

.grid {
display: grid;
grid-template-columns: 50px 550px;
grid-template-rows: 30px center;
position: relative;
}

/* Estilo base para todos los cuadros */
.cuadro {
border: 2px solid black;
margin: -1px; /* Superposición de bordes */
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;

}

/* Cuadro 1: Vertical, pegado abajo */
.uno {
grid-column: 1 / 2;
grid-row: 1 / 2;
align-items: flex-end;
justify-content: center;
padding-bottom: 20px;
}

.vertical-text {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: bottom;
font-family: 'Courier Prime', monospace;
font-weight: 300; /* Aseguras que use el peso Bold */
}

/* Cuadro 2: Derecha del primero, centrado, con padding */
.dos {
grid-column: 2 / 3;
grid-row: 1 / 2;
text-align: center;
padding: 60px;
padding-top:70px;
padding-bottom:40px;
flex-direction: column;
}

/* Centramos el contenido vertical y horizontalmente */
.dos p {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

/* Cuadro 3: Debajo del primero, texto "1" centrado */
.tres {
grid-column: 1 / 2;
grid-row: 2 / 3;
justify-content: center;
align-items: center;
padding: 10px;
font-weight: bold;

}

/* Cuadro 4: Debajo del segundo, al lado del tercero, alineado a la izquierda */
.cuatro {
grid-column: 2 / 3;
grid-row: 2 / 3;
justify-content: flex-start;
align-items: center;
padding: 10px;
font-family: 'Courier Prime', monospace;
font-weight: 300; /* Aseguras que use el peso Bold */

}< /code>


Título 1

PALABRA CLAVE 1

PALABRA CLAVE 2

PALABRA CLAVE 3

PALABRA CLAVE 4

PALABRA CLAVE 5

PALABRA CLAVE 6

PALABRA CLAVE 7

PALABRA CLAVE 8

1
Explicación
< /code>
< /div>
< /div>
< /p>
Проблема, с которой я сталкиваюсь сейчас, адаптируется, чтобы быть отзывчивым. Я попытался изменить значения пикселей на проценты, но он ломает макет. Я также пробовал различные медиа -запросы, но все еще не получаю это правильно для некоторых размеров.


Подробнее здесь: https://stackoverflow.com/questions/796 ... the-design