Discussion :

[Mister Paul]

Bonjour,

j'ai un petit souci avec la largeur d'un DIV…
J'aimerais que le <div id="content"> ait une largeur de 537px au lieu des 300px d'origine du template.

Si je modifie le style

Code :

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

1
2
3
4
#content {
	float: left;
	width: 537px;
}

je n'ai pas de souci apparemment sur les navigateurs.
Mais par contre sur smartphone (en tous cas sur l'iPhone) dès que je dépasse des 300px la taille des polices augmente aussi...

Je ne comprends pas du tout ce qui se passe...


Le CSS :

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
37
38
39
40
#wrapper {
	position: relative;
	width: 740px;
	margin: 0 auto;
	text-align: left;
}
#header {
	position: relative;
	height: 110px;
}
#menu {
	position: absolute;
	right: 190px;
	bottom: 10px;
}
#wrapper_content {
	float: left;
	width: 537px;
	background: #fff;
	padding-top: 10px;
}
#content {
	float: left;
	width: 300px;
}
#content-padding {
	padding: 10px;
}
#footer {
	text-align: left;
}
#logo img {
	display: block;
}
.space {
	height: 50px;
}
.clear {
	clear: both;
}

Et le html :

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
      <div id="wrapper_content">                      
          <div id="content">                        
           	<div id="content-padding">
            <!-- Début article en page intérieure -->         
			<h2 class="contentheading ">Le titre</h2>
				<div class="contentpaneopen ">
				<span class="introduction">Introduction</span><br /><span class="titre_paragraphe">Le titre du paragraphe</span><br />Du texte
				</div>
				<span class="article_separator"></span>
             </div>
           </div>                            
           <div class="clear"></div>
       </div><!-- end wrapper_content div -->
       <div class="clear"></div>

Votre aide serait la bienvenue.


Paul

[rodolphebrd]

Bonjour,

Avez-vous renseigné la meta viewport ?

[Mister Paul]

Oui j'ai mis

Code html :

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

<meta name="viewport" content="initial-scale=0.5">

Mais ça ne règle pas le problème…


Edit :
j'ai essayé depuis

Code html :

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

<meta name="viewport" content="width=device-width,initial-scale=0.5,user-scalable=yes" />

pas d'amélioration

[rodolphebrd]

et avec ça ?

Code html :

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

<meta name="viewport" content="initial-scale=1.0">

[Mister Paul]

Ça change juste le rapport de zoom (on est plus zoomé et les lettres sont plus grosses). Mais le problème est toujours là :
quand on met un width supérieur à 340px la typo s'agrandit…

[Mister Paul]

Pour illustrer :
#content avec un width jusqu'à 340px
#content avec un width supérieur ou égal à 341px

[rodolphebrd]

Avez-vous une page en ligne, car il me semble qu'il manque quelque chose.

[Invité]

Bonjour,
une page en ligne serait utile.
[Edit] Oups ! Hello rodolphebrd !