Redimensionner graduellement deux colonnes

Version imprimable

23/04/2019, 22h16
pierrot10

Redimensionner graduellement deux colonnes
Bonjour,

Je dois refaire la refonte d'un site internet et il faut que le site se redimensionne en fonction de la taille du navigateur.

Voici le template: http://www.shiatsu-energie-geneve.ch/new/

Il faut que la colonne de droite ait toujours une largeur de 313px.
La colonne de droite doit compenser la largeur en fonction de la largeur de la page.

Pour cela, j'ai ajouté ce code css
Code:

1 2 3 4 5 6 #row2,#row3{ display: grid; grid-template-columns: minmax(200px, 1fr) minmax(200px, 313px); /*grid-auto-rows: minmax( 10rem, 1fr );*/ }
Le problème que je dois résoudre est lorsque que la colonne de gauche atteint la largeur du logo, qui fait 396px.
A ce moment là, il faudrait que les deux images de la colonne de droite et de gauche se redimensionne proportionnellement.
Actuellement, si vous redimensionnez la page, les colonnes se redimensionnent par accoup. et surtout le logo diminue avant l'image de droite, et il faudrait donc, que ces deux images commencent à diminuer ensemble et proportionnellement.

A quel moment, et comment peut-on déclencher le redimensionnement de la deuxième image quand la première commence?
(J'utilise aussi la librairie bootstrap)

Merci!!
23/04/2019, 22h23
pierrot10

PS: Du moins, si les colonnes se redimensionne par accoup, c'est pas trop grave, même si ce n'est pas top. Mais il faudrait que les images se redimensionne en même temps, pas comme c'est le cas actuel
;)

Bonjour,

1- voici une solution :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 #row2, #row3 { /*display: grid; SUPPRIMER */ /*grid-template-columns: minmax(200px, 1fr) minmax(200px, 313px); SUPPRIMER */ /*grid-auto-rows: minmax( 10rem, 1fr ); SUPPRIMER */ display: flex; flex-wrap:nowrap; } #row2 > div:first-child, #row3 > div:first-child { flex: 1 1 1%; } #row2 > div:last-child, #row3 > div:last-child { flex: 0 0 38%; max-width: 313px; }
N.B. Je maitrise mieux display: flex; que display: grid;...

2- Concernant les "à coups", il sont dus aux largeurs de .container, définies en pixels, qui changent en fonction des breakpoints.
On peut définir la largeur de .container en % (+ max-width en pixels) :
Code:

1 2 3 4 body > .container { width: 100% !important; max-width: 1140px !important; }
Et c'est tout.

3- Explique-nous pourquoi on trouve 2 balises <head> et <body> (à la fin du code) : 8O
Code:

1 2 3 ... <script src="js/scripts.js"></script> </body><head><style type="text/css"></style></head><body></body></html>

24/04/2019, 21h04
pierrot10

trop classe!
merci jreaux62.

Par contre, je ne vois pas ces deux balises <head> et <body>. J'avais en effet oublié de fermer </html>, mais c'est fait maintenant.
Du moins ca parrait tout bon.
Milles mercis pour ton aide