[RÉGLÉ] Responsive design avec gantry, problème de taille de section

[Paladin]

Bonjour.
Je n'arrive pas à gérer la taille de mes sections dans gantry quand la taille de l'écran change. En large desktop (plein écran) tout est ok. Mais quand je réduis à la taille de la fenêtre ma barre de menu (qui est sur la gauche en vertical) devient toute petite. Si je réduis encore, elle redevient "normale".

En fait la section où j'ai ma barre de menu à une largeur de 12%, et quand je passe en écran en peu réduit c'est toujours 12% mais d'un écran de 800 pixels de largeur... Comment indiquer à gantry que s'il passe à un écran qui n'est pas large desktop on veut que la largeur de la barre de menu passe à 30% par exemple ? Je suppose que c'est dans le custom css mais je vois pas du tout comment faire...

[lomart]

Bonsoir,

Ca va être compliqué de cibler précisément la sidebar. La règle CSS (size-xx) est générale et risque d'avoir des effets inattendus

Il faut trouver les sélecteurs concernés et ajouter les règles en fin de custom.css. Je dis LES sélecteurs car si on ajoute à Paul, il faut retirer à Jacques

[Paladin]

Ca y est j'ai réussi !
Bon en fait y'a plusieurs étapes.
Etape 1 : donner un id au conteneur. Genre SidebarA, MainA etc. Ben oui par défaut y'a pas d'id... Je galérais et en fait c'est tout bête C'est dans gantry directement, faut aller dans layout, cliquer sur l'icone en forme d'engrenage et choisir l'onglet block...
Etape 2 : mettre dans le custom.scss tous les breakpoints dont on a besoin.
La liste est là :

http://docs.gantry.org/gantry5/tutorials/media-queries

(l'include y'a pas besoin si on a déjà mis @import 'dependencies'; dans son fichier custom)

Etape 3 : on met du css
Dans mon cas ca donne ça :

@include breakpoint(large-desktop-range){
    #sidebarA {
       width: 12%;
       flex: 0 1 12%;
    }
    #mainA {
       width: 88%;
       flex: 0 1 88%;
    }
}
@include breakpoint(desktop-range){
    #sidebarA {
       width: 24%;
       flex: 0 1 24%;
    }
    #mainA {
       width: 76%;
       flex: 0 1 76%;
    }
}

Et ca marche !!! Bon après faut prévoir tous les breakpoints pour changer ce qui ne convient pas. A noter qu'en fait j'ai pas vraiment besoin de mettre le large-desktop-range, c'est celui par défaut.