Affichage responsive design

**runner77** · 21/04/2016, 15h16

Bonjour à tous,

J'ai un petit souci avec le CSS d'un site.
En effet j'ai un bloc qui s'affiche correctement sur PC, mais quand je passe sur un écran de smartphone celui-ci ne s'affiche pas comme je le souhaiterai.
Je voudrais que mes blocs soient les un sous les autres et prennent toutes la largeur.
Or ses derniers reste petit et ne se mettent pas les uns sous les autres.

Voici la capture d'écran.

Nom : Capture d’écran 2016-04-21 à 13.48.20.png
Affichages : 94
Taille : 35,7 Ko

Nom : Capture d’écran 2016-04-21 à 13.48.20.png
Affichages : 94
Taille : 35,7 Ko

Voici le code HTML avec les class

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<div class="view view-articles-subcategories view-id-articles_subcategories view-display-id-block view-dom-id-1971f96233bc99416085a3bbd8c69868"> 
      <div class="view-content">
      	<div class="view-group">
      		<!--
      			ARTICLE 1
      		-->
			<div class="views-row views-row-1 views-row-odd views-row-first">	      
 	 			<div class="views-field views-field-view">
 	 				<span class="field-content">
 	 					<div class="view view-articles-subcategories view-id-articles_subcategories view-display-id-block_1 view-dom-id-3f8066ada41f4eaec0e67af52587c760">  
     						<div class="view-content">
      							<div class="view-group">
		  							<img typeof="foaf:Image" src="http://test.nhd-technology.net/ser/sites/default/files/styles/gallery_main/public/copie_visuel_2_0.jpg?itok=wGM1vxv0" width="360" height="230" />			  
		  							<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">      
  										<div class="views-field views-field-title">
  											<span class="field-content">
  												<a href="/ser/content/article-1">
  													Article 1
  												</a>
  											</span>
  										</div>
  										<div class="views-field views-field-field-intro-fc">
  											<div class="field-content">Artic</div>
  										</div>
  										<span class="views-field views-field-created">
  											<span class="field-content">
  												18.04.2016
  											</span>
  										</span>
  										&bull;  
 	 									<span class="views-field views-field-name">
 	 										<strong class="field-content">La route plus sûre</strong>
 	 									</span>
 	 								</div>
 	 							</div>
 	 						</div>
 	 					</div>
 	 				</span>
 	 			</div>
 	 		</div>
 	 		<!--
 	 			ARTICLE 2
 	 		-->
 	 		<div class="views-row views-row-2 views-row-even">      
  				<div class="views-field views-field-view">
  					<span class="field-content">
  						<div class="view view-articles-subcategories view-id-articles_subcategories view-display-id-block_1 view-dom-id-92ca4c5db35a221590d60828ad7e6c6b"> 
     	 					<div class="view-content">
						    	<div class="view-group">
		  							<img typeof="foaf:Image" src="http://test.nhd-technology.net/ser/sites/default/files/styles/gallery_main/public/copie_visuel_2_0.jpg?itok=wGM1vxv0" width="360" height="230" />			  
		  							<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
	      								<div class="views-field views-field-title">
	      									<span class="field-content">
	      										<a href="/ser/content/article-2">
	      											Article 2
	      										</a>
	      									</span>
	      								</div>  
 		 								<div class="views-field views-field-field-intro-fc">
 		 									<div class="field-content">Artic</div>
 		 								</div>  
  										<span class="views-field views-field-created">
  											<span class="field-content">18.04.2016</span>
  										</span>
  										&bull;  
  										<span class="views-field views-field-name">
  											<strong class="field-content">La route intelligente</strong>
  										</span>
  									</div>
								</div>
							</div>  
						</div>
					</span>
				</div>
			</div>
			<!--
				ARTICLE 3
			-->
		  	<div class="views-row views-row-3 views-row-odd views-row-last">	      
  				<div class="views-field views-field-view">
  					<span class="field-content">
  						<div class="view view-articles-subcategories view-id-articles_subcategories view-display-id-block_1 view-dom-id-a899ef29f2b5606491ee729de266006b"> 
      						<div class="view-content">
      							<div class="view-group">
		  							<img typeof="foaf:Image" src="http://test.nhd-technology.net/ser/sites/default/files/styles/gallery_main/public/copie_visuel_2_0.jpg?itok=wGM1vxv0" width="360" height="230" />			  
		  							<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">      
 				 						<div class="views-field views-field-title">
 				 							<span class="field-content">
 				 								<a href="/ser/content/article-3">Article 3</a>
 				 							</span>
 				 						</div>  
  										<div class="views-field views-field-field-intro-fc">
  											<div class="field-content">Artic</div>
  										</div>  
  										<span class="views-field views-field-created">
  											<span class="field-content">18.04.2016</span>
  										</span>
  										&bull;  
  										<span class="views-field views-field-name">
  											<strong class="field-content">La route pour tous</strong>
  										</span>
  									</div>
								</div>
							</div> 
						</div>
					</span>
				</div>
			</div>
		</div>
	</div>
</div>

Et enfin les class s'y reportant.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
/* ARTICLES */
 
.view-articles-subcategories.view-display-id-block .view-group, 
.view-articles.view-display-id-page_1 .views-row, 
.view-articles.view-display-id-block_1 .views-row, 
.view-articles.view-display-id-block_2 .views-row {
	display: inline-block;
	margin-bottom: 20px;
	width: 100%;
}
.view-articles-subcategories.view-display-id-block .view-group {
	width: 100%;
}
.view-articles-subcategories.view-display-id-block .views-row:hover {
	height: 58px;
}
.view-articles-subcategories.view-display-id-block .views-row .views-field {
	display: inline-block;
}
.view-articles-subcategories.view-display-id-block .views-row .views-field.views-field-title {
	display: inline-block;
}
 
.view-articles-subcategories.view-display-id-block .view-group, 
.view-articles.view-display-id-page_1 .views-row, 
.view-articles.view-display-id-block .views-row, 
.view-articles.view-display-id-block_1 .views-row, .view-articles.view-display-id-block_2 .views-row {
	margin-bottom: 20px;
	width: 100%;
}
.view-articles-subcategories.view-display-id-block .views-row .views-field-title *, 
.view-articles.view-display-id-page_1 .views-row .views-field-title *, 
.view-articles.view-display-id-block_1 .views-row .views-field-title *, 
.view-articles.view-display-id-block_2 .views-row .views-field-title * {
	font-size: 16px;
}

Une idée ??

Merci d'avance

Invité · 21/04/2016, 19h30

Bonjour,

1/ Une chose est sûre : TROP de div et de span !

Et surtout : TROP de div DANS des span !
On ne met pas de div dans des span.

=> ça doit certainement pouvoir se simplifier !

2/ Les codes HTML/CSS que tu donnes ne montrent pas le problème (testé)

3/ Je n'ai vu aucun media queries dans le CSS.

**runner77** · 22/04/2016, 07h50

Bonjour "jreaux62"

1/ Une chose est sûre : TROP de div et de span !

Et surtout : TROP de div DANS des span !
On ne met pas de div dans des span.

=> ça doit certainement pouvoir se simplifier !

Je ne peux gérer le code généré par Drupal (J'ai récupéré le code via l'affichage du code source du navigateur)
Au passage je suis contre les CMS notamment pour le code déguelasse qu'il génère.

2/ Les codes HTML/CSS que tu donnes ne montrent pas le problème (testé)

La est bien le problème car sur le site résultat néant

3/ Je n'ai vu aucun media queries dans le CSS.

Il y en a je n'ai pas mis l'ensemble du CSS (Trop long et inutile car ne gérant pas cette section)
Voici le code media queris un peu avant le CSS du dessus.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
/* MOBILE RESPONSIVE */
 
@media screen and (max-width: 568px) {

Invité · 22/04/2016, 10h11

Bonjour,

ce que je voulais dire, c'est que le code donné ne montre pas le résultat tel que sur ta copie d'écran.
Ne pouvant pas visualiser le problème, on ne peut pas le résoudre.

Tu peux le constater/tester sur http://codepen.io/pen/.

Envoyé par runner77

je n'ai pas mis l'ensemble du CSS (Trop long et inutile car ne gérant pas cette section)

Je n'en suis pas si sûr...

**runner77** · 22/04/2016, 10h26

Je ne remet pas en cause ta réponse

En testant l'ensemble du CSS il n'y a pas de changement visible non plus via codepen :/

Merci quand même pour ton retour et ton temps passé à me répondre

Je vais essayer de continuer à chercher dans tous ce bazar :/

Affichage responsive design

Responsive design en CSS

Discussions similaires

Partager

Partager