Faire des div de contenu sensible

Mon contenu n'est pas sensible à l'heure actuelle. Je l'ai testé sur l'iPhone et le texte va au-dessus de l'écran.

J'ai modifié le CSS de mon conteneur:

#container2 {
    width: 960px; 
    max-width: 90%;
    position: relative;
    left: 50%;
    margin-left: -480px;
    line-height: 1.4em;
}

Quand je l'ai tester après le changement, le contenu disparaît. J'ai lu que la mise max-width:90%; de lui permettre de ne pas dépasser la largeur de la limite ( http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design ), mais évidemment ça ne fonctionne pas. Ce que je fais mal?

Je regarde vos marges left: 50%; et margin-left: -480px peut-être redondant, mais ne peut pas dire sans voir votre contexte. D'un réactif de page, il serait plus utile d'utiliser le pourcentage plutôt que de la taille du pixel définitions. Et vous voudrez peut-être regarder dans les CSS media queries

OriginalL'auteur user1636968 | 2012-09-28

  1. 14

    essayer ce css:

    /* Show in default resolution screen*/
#container2 {
width: 960px;
position: relative;
margin:0 auto;
line-height: 1.4em;
}

/* If in mobile screen with maximum width 479px. The iPhone screen resolution is 320x480 px (except iPhone4, 640x960) */    
@media only screen and (max-width: 479px){
    #container2 { width: 90%; }
}

    Ici la démo: http://jsfiddle.net/ongisnade/CG9WN/

    Peut-être mieux si vous modifiez le code de cette façon: #container2 { max-width: 960px; width: 100%; position: relative; margin:0 auto; line-height: 1.4 em; }

    OriginalL'auteur Fredy

  2. 8

    Pas beaucoup à aller là-bas, mais je pense que ce que vous cherchez est de renverser l' width et max-width valeurs:

    #container2 {
  width: 90%;
  max-width: 960px;
  /* etc, etc... */
}

    Qui va vous donner un conteneur de 90% de la largeur de l'espace disponible, jusqu'à un maximum de 960px, mais qui dépend de son conteneur être redimensionnables. Responsive design est un ensemble de grosse boule de cire mais, si ce n'est même pas rayer la surface.

    OriginalL'auteur ultranaut

  3. 0

    @media screen and (max-width : 760px) (pour les tablettes et téléphones) et de l'utiliser avec cet: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    OriginalL'auteur Scriptery