Super responsive

Comment s'affiche mon site sur un "grand" écran ? (bis)

On l'a vu dans l'article précédent : la responsivité ou adaptabilité est l'ensemble des dispositions qui permettent à un site de s'afficher sur toutes les plateformes, en particulier sur les minuscules écrans des GSM portables et tablettes. Le site change d'aspect, mais les informations restent lisibles et complètes. Ces dispositions suivent généralement la règle du "plus petit dénominateur commun". Ce qui est nécessaire pour un petit écran conditionne en partie ce qui sera acceptable pour un grand. Conséquemment, une large surface des grands écrans reste vide. L'image illustre comment apparaît mon site sur un écran d'Imac 27'. Certains écrans affichent deux fois plus de pixels ! Si les écrans supérieurs à 1330 X 468 ne représentent que 2% des utilisateurs, faut-il les ignorer pour autant ?

Responsivité "positive" deuxième solution

L'idée est de profiter de cet espace pour répartir la page en plusieurs colonnes, sur toute la largeur. Selon la largeur disponible, nous aurons deux ou trois colonnes (ou davantage), si le contenu reste lisible.

Structurer la page

Je vais utiliser la propriété column. Je vais donc rassembler les éléments dans une colonne unique.

Libérer l'espace horizontal

Comme vu précédemment (super -responsive), la largeur des éléments est pilotée par le contenant parent-parent de class  ".jtpl-content__inner" , auquel j'impose une largeur maximum de 100%, lorsque la fenêtre dépasse 1300px (voir note préliminaire en haut de page)

@media(min-width:1300px) { 

#page-2073798098 .jtpl-content__inner {max-width: 100%!important;} }

Centrer le contenant parent

Collumn se charge de centrer les éléments, aucune disposition supplémentaire n'est nécessaire.

Column-niser l'article

Je cible la colonne unique (Jimdo crée des successions de divs imbriquées automatiquement, il faut aller chercher le parent le plus proche du contenu)

#cc-matrix-2794681098

Et je décris les valeurs désirées de la propriété column pour les éléments de l'article. 

{-moz-column-width:500px; (…) -moz-column-gap :30px;(…) -moz-column-rule: 10px solid rgba(152, 62, 62, 0.2); (…) } 

Je n'indique pas de column-count afin de permettre un nombre variable de colonnes.

Adapter le design

Les colonnes de 500px sont écrasées par les images imbriquées. Il convient de rétablir la proportionnalité des images et du texte à l'intérieur des modules texte+image

#cc-matrix-2794681098 .j-textWithImage .cc-imagewrapper {max-width: 50%;}

Pour que chaque chapitre soit sur une seule colonne, je leur applique une valeur qui court-circuite column. Mais je dois éviter les séparateurs, qui doivent être touchés par column. Je précise de ne cibler que les modules texte+image : 

#cc-matrix-2794681098 .j-textWithImage {display:inline-block;}

Ajustage de détails

Les séparateurs horizontaux sont parfois en haut, parfois en bas de colonne. Je sélectionne leur marque dans le code source, et je le colle en html à l'intérieur de mes module texte+image, à la fin, en supprimant leur id. 

<div class="j-module n j-hr"><hr /></div>

J'en profite pour faire correspondre leur aspect à celui des séparateurs verticaux

#cc-matrix-2794681098 div.j-hr > hr{border: 10px solid rgba(152, 62, 62, 0.2)!important;}