code CSS - bloc @media pour version mobile d'april.org

code CSS - Media query pour version mobile d'april.org

HTML

Ne fonctionnera pas sans une ligne à rajouter absolument au début de chaque page HTML, dans le <head> de chaque page : <meta name="viewport" content="width=device-width" />

CSS

Doit se retrouver après toutes les autres règles CSS existantes puisque :

la priorité des sélecteurs ci-contre est identique à ceux déjà existants pour l'affichage standard
à sélecteur identique, c'est la dernière propriété qui s'applique

Les CSS du site de l'APRIL étant compressées/minifiées par Drupal, j'ignore dans quel fichier CSS il faudrait les ajouter (ou s'il est possible d'en rajouter un dernier "mobile.css")

@media (max-width: 640px) {

/*	Adaptation réalisée à partir de l'astuce Alsacréations
	"Une feuille de styles de base pour le Web mobile"
	http://www.alsacreations.com/astuce/lire/1177-une-feuille-de-styles-de-base-pour-le-web-mobile.html
*/

/* passer tous les éléments de largeur fixe en largeur automatique */ 
body,
#page,
#content,
.sidebar-right #content-inner,
#sidebar-right {
	width: auto !important; 
	margin: auto !important; 
	padding: 0 !important;
}

#page { 
	min-width: 0 !important; 
}

/* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */ 
img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video { 
	max-width: 100% !important; 
}
 
/* gestion des mots longs */ 
textarea, table, td, th, code, pre, samp { 
	word-wrap: break-word; /* césure forcée */ 
}
code, pre, samp { 
	white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */ 
}

/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */ 
#content,
#sidebar-right,
#home #alaunetable #alaunetablegauche,
#home #alaunetable #alaunetabledroite,
.panel-2col-bricks .panel-col-first,
.panel-2col-bricks .panel-col-last { 
	float: none !important; 
	width: auto !important 
}

/* masquer les éléments superflus */ 
.hide_mobile { 
	display: none !important; 
}
 
/* Un message personnalisé */ 
body:before { 
	content: "Version mobile du site"; 
	display: block; 
	color: #777; 
	text-align: center; 
	font-style: italic; 
}

/* formulaire de connexion */
#user-login-form > div {
	text-align: right;
}

#user-login-form .form-item {
	float: none;
	text-align: right;
}

#block-user-0 .form-item label,
#block-user-0 .form-item input {
	float: none;
	display: inline;
	width: auto;
	margin-right: 0;
}

/* menu */
#navbar,
#navbar-inner {
	width: 100%;
	margin: 0;
}

#primary ul.links {
	margin-bottom: 10px;
}

#primary ul.links li,
#primary ul.links li.first,
#primary ul.links li.last {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
}

#primary ul.links li a {
	padding: 2px 7px;
}

#primary ul.links li:not(:first-child) a {
	padding: 2px 7px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}

/* titre */
h1.title {
	padding: 7px 15px 0 20px;
}

/* fond du contenu */
#main {
	background: #E6EBED;	/* remplace background-image */
}

/* marges du contenu */
#content-area {
	padding: 0 8px;
}

.panel-col-last .inside {
	padding-left: 0;
}

.panel-2col-bricks .panel-col-last .inside {
	margin: 0 4px 0.5em 4px;
}

#home #adherer,
#home #campagne,
#home #alaunetable {
	padding: 10px 15px;
}

#home .panel-pane {
	margin: 0 0 5px 0;
}

#home #alaunetabledroite h2 {
	margin-top: 15px;
}

#main #content .pane-content img {	/* bannière */
	margin: 0;
}

/* sidebar */
#sidebar-right {
	border-top: 2px solid #888;
	background-position: left top;
	background-size: 100% 81px;	/* étendre une image de fond en CSS3 (et dans un bloc Media Queries ça fonctionne à peu près à coup sûr !) */
}

#block-search-0 .block-inner {
	margin-top: 0;
	padding: 15px 0 10px 10px;
}

#block-block-14 img {	/* boutons orange/bleu : 1 par ligne */
	display: block;
	margin: 5px auto;
}

/* Footer */
#footer-message {
	text-align: left;
}

#footer-message a:last-child {
	display: block;
	text-align: center;
	margin: 0.3em 0 1em 0;
}


} /* fin MQ mobile @media */

Ph. Vayssière