La couleur de fond est coupée en plus petite résolution

Question

Salut J'ai un problème pour étirer une couleur d'arrière-plan. Il correspond parfaitement à une résolution plus grande. Lorsque la résolution passe sous la largeur de 1254px, l'arrière-plan ne s'étire pas. Cependant, le contenu à l'intérieur du conteneur reste parfait.

Voici le site. Veuillez redimensionner le navigateur ci-dessous 1254px et vérifiez, vous trouverez des espaces blancs sur le côté droit.

www.origininteractive.in/projects/stars11

Heres le code html view-source: http://www.origininteractive.in/projects/stars11/

Heres le code CSS

http://www.origininteractive.in/projects/stars11/css/style.css

Merci

Answer 1

La raison est que main_body & tout ce qu'il est les enfants ont une largeur statique, où conteneur de pied de page en-tête & ont 100% width. largeur pour main_body est 1237px, donc quand vous redimensionnez ci-dessous 1237px récipient supérieur obtenir la largeur du corps, mais main_body conteneur garder width de 1237px ainsi un est montré.

Pour se débarrasser de ce changement pour tous les styles main_body & c'est les enfants à largeur pour cent, à base

ou donner un bodymin-width:1242px; il empêchera body d'aller en dessous 1242px. (5px de plus cause un certain conteneur interne streching main_body à '1242px').

Answer 2

Ajouter display: inline-block; à votre body et c'est va résoudre le problème.

La raison en est, La plupart de vos éléments ont une largeur codée en dur dans px. exemple

.top_menu_header_cont { 
width: 1237px; 
height: 74px; 
} 

En raison de cela quand la largeur de votre écran passe en dessous 1200px, il y a un problème de display.

Answer 3

Appliquer la largeur minimale pour le récipient intérieur et l'intérieur du pied de page.

.inside_container { min-width: 1237px; height:830px; margin:0 auto;} 
.inside_footer { min-width:1237px; height:130px; margin:0 auto; }