Pour a mise en page, le template protostar donne le choix entre statique ou fluide dans le gestionnaire de template sous l'onglet Options.

Extensions -> Gestionnaire des templates -> Protostar (dans la colonne de style) -> Advanced

La mise en page fluide réduit la largeur de <div class="container-fluid"> proportionnellement à la largeur de l'écran.

La mise en page statique a une largeur fixe pour <div class="container"> pour les grands écrans et un pourcentage de l'écran pour des écrans plus étroites.

Ce bouton d'option indique simplement au PHP derrière Joomla d'ajouter "-fluid" à la fin de "container" puis la feuille de style prend le relais à partir de là.

Le style par défaut de cette mise en page est dans une feuille de style nommée template.css dans le dossier css sous le dossier protostar dans les templates.

Informations sur les mises en page fluides

L'option de mise en page fluide aura une div extérieure contenant appelée container-fluid. Il n'y a pas de largeur affecté à container-fluid : donc, il agrandira le contenu pour remplir l'écran, sauf pour le padding par défaut de 20px. Cette pleine largeur se produira même sur de très larges moniteurs et les colonnes individuelles deviennent plus larges aussi.

Vous pouvez ajouter une largeur dans les css à container-fluid (ex 80%) , et même centrer le template. Pour cela il faudra utiliser le code :

.container-fluid {
    margin: auto;
      width: 80%;
}

Les divs #sidebar, #content et #aside sont un pourcentage de la div conteneur .row-fluid. Ceci est contrôlé par le style de la classe de span3, span6, etc. Voyez l'exemple:

.row-fluid .span6 {width: 48.9362%;}

Pour la mise en page fluide du template protostar, Si l'écran se réduit à une taille inférieure à 767px, toutes les balises div avec une classe commençant par span, et tous les <li> dans le menu en position-1, auront un style avec float: none et width: 100% d'assignés qui leur fera remplir le div contenant et se superposer. Si vous regardiez votre site sur un iPhone, vous verrez cet empilement vertical, mais ce ne sera pas le cas sur la tablette (du moins pas sur iPads paysage ou portrait).

Réduire sans cesse la taille du conteneur fonctionnera très bien pour certains sites, mais les colonnes réduisent aussi de taille. Cela peut s'avérer provoquer des problèmes de style, notamment pour les images et les polices. En outre, avoir votre site large comme un écran très large peut rendre des blocs de texte difficiles à lire.