DéveloppementsBac à sable

Rendre la largeur du blog flexible en fonction des dimensions de la fenêtre [Responsive Web Design]


Suite à l'arrivée des Thèmes de la 3e génération, les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes ou qui ne conviennent pas à votre nouveau thème !
Pour vous aider a développer votre thème, référez-vous :En cas de besoin, exposez votre cas sur le forum.
Description Gadget Version Template Version
Utilisation de media screen dans les modèles standards b:v2.
1
2
C'est un phénomène à la mode que font face les webmasters depuis l'émergence des portables et de tous ces nouveaux types d'appareils dotés d'écrans avec des résolutions plus que variés.

Le réseau social Google+, le nouveau site d'Eurosport France, le site de Discovery Channel France, et même votre blog favori Blogger Code ont plié leur support visuel en 4 pour répondre aux contraintes des différentes résolutions.

Mais comment afficher un blog pachydermique sur un tout petit confetti ?
Avec les modèles standards b:v2 de Blogger, il est possible d'effectuer quelques aménagements en débloquant la largeur fixe maximale lorsque la largeur de la fenêtre devient inférieure à celle du blog. On va même en profiter pour balancer les colonnes des gadgets au pied du blog lorsque la fenêtre deviendra trop étroite.
Pour réaliser cela, on va employer simplement la spécification CSS media screen.

Dans le code HTML de votre modèle, déployez la balise b:template-skin :

<b:template-skin></b:template-skin>

Recherchez l'emplacement :

      ]]>
    </b:template-skin>

Juste avant, vous y ajoutez ce CSS :

      @media screen and (max-width: $(content.width)) {
        body {
          min-width: inherit;
          padding: 0px;
        }
        .content-outer, .content-fauxcolumn-outer, .region-inner {
          min-width: inherit;
          max-width: inherit;
          _width: inherit;
        }
      }
      @media screen and (max-width: 550px) {
        body {
          min-width: 550px;
        }
        .content-outer, .content-fauxcolumn-outer, .region-inner {
          min-width: 550px;
          max-width: 550px;
          _width: 550px;
        }
      }
      @media screen and (max-width: 800px) {
        .main-inner .columns {
          padding-left: 0;
          padding-right: 0;
        }
        .main-inner .fauxcolumn-center-outer {
          left: 0;
          right: 0;
          _width: expression(this.parentNode.offsetWidth -
            parseInt("0") -
            parseInt("0") + 'px');
        }
        .main-inner .fauxcolumn-left-outer {
          width: 100%;
        }
        .main-inner .fauxcolumn-right-outer {
          width: 100%;
        }
        .main-inner .column-left-outer {
          width: 100%;
          right: 0;
          margin: 2em 0 2em 0;
        }
        .main-inner .column-right-outer {
          width: 100%;
          margin: 2em 0 2em 0;
        }
      }

Les valeurs en rouge correspondent à la largeur minimum que votre modèle peut supporter (il faut quand même fixer une limite raisonnable :D ).
La valeur en vert détermine à partir de quelle largeur les colonnes latérales sont repositionnées en-dessous de la colonne centrale (comme pour la version mobile).
Modifiez toutes ces valeurs en fonction de votre contenu.

Assistance publique pour le produit Blogger sur les supports  d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

Base de connaissancesFiches techniquesInclusions universelles
Open Graph Protocol [openGraphMetaData]
Populaire
DéveloppementsFichiers XML
Populaire
DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
Base de connaissancesFiches techniquesInclusions universelles
Balises de l'entête HTML des thèmes [all-head-content]
Populaire
Base de connaissancesFonctionnalitésÉditeurs
Populaire