übermäßiger Totraum auf der rechten Seite der Website innerhalb von 600-1024px Bereich

Question

Ich kann dieses Verhalten nicht erklären, und ich habe dieses Problem seit 3 ​​Tagen untersucht. Die fragliche Webseite ist here. Entschuldigen Sie den aufgeblähten Zustand und andere Mängel, die nicht von einem professionellen Webdesigner verursacht wurden - und zwar in einem Entwicklungs-/Experimentalzustand.

Innerhalb eines bestimmten Bildschirmgrößenbereiches geht meine Website - anstelle der Bildschirmgröße, wie sie in diesem Bildschirmbereich codiert wurde - in x-Scrolling und zeigt den Totraum rechts neben der Website an.

Überprüfen Sie diese simulation und Scroll rechts, um den Totraum zu sehen. Beachten Sie, dass bei einem Bildschirmbreitenbereich von 600 - 1024 px kein Bildlauf erfolgen sollte - ich möchte, dass Inhalte den verfügbaren Platz ausfüllen und nicht mehr, also habe ich alle divs auf höheren Ebenen auf max-width 100% gesetzt.

Screenshot zeigt, was ich meine:

Es gibt 3 Break-Punkten basierend auf 3 Sätze von Medienanfragen und ich nehme an den aktiven, in dem das Verhalten beobachtet wird, wenn @media only screen and (min-width: 1024px) Regeln aktiv sind :

@media only screen and (min-width: 1024px){ 

div.sidebar { 
font-size: 10pt !important; 
width: 30% !important; 
display: table-cell !important; 
vertical-align: top; 
clear: right !important; 
float: left !important; 
} 


div#page{ 
margin: 0 auto !important; 
padding: 0 !important; 
max-width: 80vw !important; 
} 

main#content, .site-content{ 
width: 70% !important; 
float:left; 
} 

div#super-content{ 
width: 100% !important; 
} 

div#primary{max-width: 100% !important} 

} /* end media query */ 




/* up to 1024*/ 

@media only screen and (max-width: 1024px){ 

div.sidebar { 
font-size: 10pt !important; 
width: 30%; 
display: table-cell !important; 
vertical-align: top; 
clear: right !important; 
float: left; 
} 


div#page{ 
margin: 0 auto !important; 
padding: 0 !important; 
max-width: 100% !important; 
} 

div#primary{max-width: 100% !important} 

main#content, .site-content{ 
float: left; 
width: 70% !important; 
} 

div#super-content{ 
max-width: 100% !important; 
} 

} /* end media query */ 




/* up to 600 */ 
@media only screen and (max-width: 600px){ 

main#content{ 
width: 100% !important; 
} 

.sidebar{ 
float: left; 
vertical-align: initial !important; 
display: block !important; 
width: 100% !important; 
} 

#page{ 
max-width: 100% !important; 
} 


main#content{padding-right: 0;} 

} /* end media query */ 

ich weiß nicht wirklich, wo so weit einen Posting HTML beginnen, aber da ich die website link ausgehängt haben sollte es trivial sein in dem Browser Entwicklermodus zu gehen, um zu sehen die o Verallgemeinerte HTML-Struktur und CSS-Regeln für jeden einzelnen Container.

Answer 1

Dies wird normalerweise durch ein Schurkenelement verursacht, das aus seinem Behälter herausragt.

Sie können oft herausfinden, wo dieses Element ist, indem Sie overflow:hidden auf die Container anwenden, um herauszufinden, in welchem ​​es lebt. Wenn der Raum verschwindet, werden Sie wissen, dass es in diesem Container ist.

Ich habe Ihr Problem am 2. versucht, indem Sie dies auf das header Element auf Ihrer Seite anwenden.

Nach ein bisschen mehr Untersuchung, wird es tatsächlich von einem Sub-Nav verursacht.

Also, wenn Sie dieses Problem beheben möchten, können Sie das Dropdown-Menü positionieren konnte, nach rechts statt links ausgerichtet werden (so die Menüs bleiben die andere Art und Weise), aber:

Wie hier gezeigt Stellen Sie sicher, dass Sie dies nur auf der rechten Seite des Menüs tun, sonst haben Sie die gleichen Probleme auf der anderen Seite Ihres Nav.

Es scheint, dass Sie ein Drittanbieter-Plugin verwenden, um diese Navigation zu erstellen, also, wenn Sie nicht in die nitty-gritty Bits gehen möchten, um dies selbst zu sortieren, würde ich stattdessen eine bootstrap navigation empfehlen .

Hoffe, dass hilft, viel Glück.