Redimensionner graduellement deux colonnes

**pierrot10** · 23/04/2019, 22h16

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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!!

**pierrot10** · 23/04/2019, 22h23

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

Invité · 24/04/2019, 09h24

Bonjour,

1- voici une solution :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**pierrot10** · 24/04/2019, 21h04

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

Redimensionner graduellement deux colonnes

Dimensionnement en CSS

Discussions similaires

Partager

Partager