Project

General

Profile

Demande #592 » MQ_april.org_v01.css

bloc CSS media queries d'adaptation aux mobiles pour april.org v1 - Philippe Vayssière, 07/24/2011 09:25 PM

 
1
@media (max-width: 640px) {
2

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

    
8
/* passer tous les éléments de largeur fixe en largeur automatique */ 
9
body,
10
#page,
11
#content,
12
.sidebar-right #content-inner,
13
#sidebar-right {
14
	width: auto !important; 
15
	margin: auto !important; 
16
	padding: 0 !important;
17
}
18

    
19
#page { 
20
	min-width: 0 !important; 
21
}
22

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

    
36
/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */ 
37
#content,
38
#sidebar-right,
39
#home #alaunetable #alaunetablegauche,
40
#home #alaunetable #alaunetabledroite,
41
.panel-2col-bricks .panel-col-first,
42
.panel-2col-bricks .panel-col-last { 
43
	float: none !important; 
44
	width: auto !important 
45
}
46

    
47
/* masquer les éléments superflus */ 
48
.hide_mobile { 
49
	display: none !important; 
50
}
51
 
52
/* Un message personnalisé */ 
53
body:before { 
54
	content: "Version mobile du site"; 
55
	display: block; 
56
	color: #777; 
57
	text-align: center; 
58
	font-style: italic; 
59
}
60

    
61
/* formulaire de connexion */
62
#user-login-form > div {
63
	text-align: right;
64
}
65

    
66
#user-login-form .form-item {
67
	float: none;
68
	text-align: right;
69
}
70

    
71
#block-user-0 .form-item label,
72
#block-user-0 .form-item input {
73
	float: none;
74
	display: inline;
75
	width: auto;
76
	margin-right: 0;
77
}
78

    
79
/* menu */
80
#navbar,
81
#navbar-inner {
82
	width: 100%;
83
	margin: 0;
84
}
85

    
86
#primary ul.links {
87
	margin-bottom: 10px;
88
}
89

    
90
#primary ul.links li,
91
#primary ul.links li.first,
92
#primary ul.links li.last {
93
	display: block;
94
	float: none;
95
	margin: 0;
96
	padding: 0;
97
}
98

    
99
#primary ul.links li a {
100
	padding: 2px 7px;
101
}
102

    
103
#primary ul.links li:not(:first-child) a {
104
	padding: 2px 7px;
105
	-webkit-border-radius: 0;
106
	-moz-border-radius: 0;
107
	-ms-border-radius: 0;
108
	-o-border-radius: 0;
109
	border-radius: 0;
110
}
111

    
112
/* titre */
113
h1.title {
114
	padding: 7px 15px 0 20px;
115
}
116

    
117
/* fond du contenu */
118
#main {
119
	background: #E6EBED;	/* remplace background-image */
120
}
121

    
122
/* marges du contenu */
123
#content-area {
124
	padding: 0 8px;
125
}
126

    
127
.panel-col-last .inside {
128
	padding-left: 0;
129
}
130

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

    
135
#home #adherer,
136
#home #campagne,
137
#home #alaunetable {
138
	padding: 10px 15px;
139
}
140

    
141
#home .panel-pane {
142
	margin: 0 0 5px 0;
143
}
144

    
145
#home #alaunetabledroite h2 {
146
	margin-top: 15px;
147
}
148

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

    
153
/* sidebar */
154
#sidebar-right {
155
	border-top: 2px solid #888;
156
	background-position: left top;
157
	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 !) */
158
}
159

    
160
#block-search-0 .block-inner {
161
	margin-top: 0;
162
	padding: 15px 0 10px 10px;
163
}
164

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

    
170
/* Footer */
171
#footer-message {
172
	text-align: left;
173
}
174

    
175
#footer-message a:last-child {
176
	display: block;
177
	text-align: center;
178
	margin: 0.3em 0 1em 0;
179
}
180

    
181

    
182
} /* fin MQ mobile @media */
    (1-1/1)