Problème de remplissage réactif

J'ai conçu une page web adaptative pour le tutoriel et j'ai un problème de rembourrage inutile.Problème de remplissage réactif

http://zinzinzibidi.com/res

Dans cette page lorsque vous réduisez la résolution de votre fenêtre de navigateur, vous verrez la barre de défilement horizontal (trop-plein-x) dans certaines résolutions. J'essaie de comprendre mais je ne peux pas réparer ce problème pendant quelques jours.

Voici une image par exemple de ma détresse:

enter image description here

Mes codes CSS ici: http://zinzinzibidi.com/Areas/res/Content/css/style.css

Mes codes d'écran des médias sont

My CSS codes

ce que je fais faux?

Source

2014-08-29 Mr. Zoidberg

Il semble qu'un élément interne provoque le problème. Retirez le remplissage de # header-main-buffer et il devrait disparaître.

ligne 515 de votre fichier:

#header-main-buffer { 
    width: 300px; 
    padding: 0 10px; <- this is your problem. remove it and it will be fixed 
    ...

Source

2014-09-05 03:43:27 ericjbasti

Merci, ça marche bien maintenant. Vous pouvez le vérifier. Au fait, comment avez-vous remarqué le problème? Largeur 300px et 10px droite + 10px gauche padding ont été sensibles à la largeur de l'écran 320px media (?) –

# head-container a exactement la même largeur et le rembourrage de sorte que ses éléments internes vont commencer à droite par les 10px le rembourrage s'ajoute à il. Vous auriez vraiment pu vous débarrasser du rembourrage sur # head-container et ça aurait dû fonctionner aussi bien, c'est juste que l'élément tampon me semblait plus pratique. – ericjbasti

Vous pouvez également éviter de telles situations à l'avenir en définissant 'box-sizing: border-box;' vous devriez regarder cela ([link explaining borderbox] (http://www.paulirish.com/2012/box-sizing -border-box-ftw /)) parce que le padding va aller à l'intérieur de la largeur des éléments, donc vous écririez comme ceci 'width: 100%; rembourrage: 0 10px; taille de la boîte: border-box; – ericjbasti

J'ai vérifié votre code et il pourrait être votre <div id="header-logo"> celui créant ce rembourrage supplémentaire.

Puisque le img a une largeur fixe de 300px sur les écrans plus petits que le tit crée un rembourrage supplémentaire vers la droite afin qu'il s'adapte à l'écran.

Essayez de réduire la

@media screen and (max-width: 479px) and (min-width: 320px) { 
#header-container { 
    width:; 
} 
}

EDIT

vérifier Fondamentalement tous les img que vous utilisez pour vous assurer que leur largeur est appropriée et ils adapter à l'écran.

Source

2014-08-29 19:49:01 mencina

Ce problème a aussi dans d'autres écrans multimédias. Donc, ce n'est pas une question de résolution d'image. –

Problème de remplissage réactif

Répondre

Questions connexes