Problème avec CSS pour site mobile

Question

Je construis this site mobile.

Si vous le cochez sur votre navigateur mobile, il devrait être inséré de manière à ce qu'il n'y ait pas de défilement horizontal. (Le contenu ne devrait être empilé verticalement). Quelqu'un peut-il m'aider à corriger le CSS de la page. Faites-moi juste savoir ce que le CSS correct devrait être afin de régler automatiquement pour les différents téléphones mobiles.

CSS de cette page peut être trouvé here. Fondamentalement, je suppose que deux composants principaux. (corps et contenu)

En outre, j'ai utilisé le site Web mobile this comme exemple. S'il vous plaît se référer à son CSS en ligne en regardant la source de cette page.

Merci

Answer 1

D'accord, il semble que votre #content div pousse réellement les limites de l'écran, même sur mon grand navigateur Firefox. Dans votre CSS, vous avez déclaré comme ceci:

#content{ 
    width:100%; 
    margin: 0; 
    padding: 20px; 
    background: white; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
} 

Je confirme en éditant le CSS au niveau local, que votre rembourrage pousse effectivement les limites de la largeur 100% div, mais les bonnes nouvelles est que depuis qu'il est un élément de niveau de bloc il remplit déjà toute la pièce disponible pour lui. Essayez de vous débarrasser de la "largeur: 100%;" et voyez si cela fonctionne pour vous. Il affichera toujours exactement la même chose, mais sans ces barres de défilement.

donc quelque chose comme ceci:

#content{ 
    padding: 20px; 
    background: white; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
}