#main nicht 100% breit

Irgendwo habe ich mehrere Würmer drin und finde sie nicht:
Während #left #right und #main auf Tablet oder Smartphone an die richtigen Stellen springen, werden die Inhalte in #main nicht in Vollbreite dargestellt.
vgl. http://www.schweissundsoehne.de

Auf der Bäderseite bleibt #left links, rutscht also nicht herunter und in #main wird grid8 als volle Breite und grid4 als halbe Breite dargestellt.
Wahrscheinlich stelle ich mich hier richtig dumm an! :o

Die URL hat einen Fehler. Da steht http// noch mal nach dem .de

Du hast #left und #right direkt zusätzliche paddings gegeben. Das macht die jeweiligen Container größer und zerstört das Layout des Contao Layout Builders.

PHP-Code:

---

#container #left {
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
} 


---

Du musst diese Paddings entweder so

PHP-Code:

---

#container #left .inside {
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
} 


---

oder so

PHP-Code:

---

#container #left {
    padding-top: 30px;
    padding-right: 10px;
    padding-left: 10px;
    -moz-box-sizing:border-box;
         box-sizing:border-box;
} 


---

umsetzen. Evt. ist da noch mehr falsch, aber das ist zumindest das erste was mir aufgefallen ist.

@ Kahmoon
Danke für den Hinweis, die richtige URL ist diese.

@ Spooky
Danke für den Hinweis, aber die Änderung hat noch nichts Neues ergeben.

Ich habe für #left und #right versuchsweise die paddings alle auf 0 gesetzt. Das Problem blieb bestehen. (Deshalb ist es inzwischen wieder mit padding online.)

Temporär könntest du es mit

Code:

---

#main, #left, #right {
float:left!important;
}

---

im mobilen CSS fixen. Irgendwas scheint bei dir im Argen zu sein, ich würde nach und nach die CSS-Dateien (Grid und andere) mal deaktivieren und nach welcher Deaktivierung es funktioniert wie es normalerweise gehen sollte.

Weiters ist es so, dass zwischen einer Viewport Breite von 768px und 799px nicht mehr genug Platz im #container für #left und #right sind (in der Version ohne paddings), daher verschwinden diese dort aus dem #container hinaus. Ab einer Viewport Größe von unter 800px sind nämlich nur mehr weniger als 240px platz im #container.

Deinen Quickfix hatte ich bereits drin, habe ihn jetzt auch noch mal eingeschaltet, aber er bringt auch keine Lösung.
Das einzelne Ausschalten der zusätzlichen CSS Dateien hat zwar Durcheinander bringen können, mich allerdings nicht wirklich erleuchtet.

Zitat:

---

Zitat von gesti

Deinen Quickfix hatte ich bereits drin, habe ihn jetzt auch noch mal eingeschaltet, aber er bringt auch keine Lösung.
Das einzelne Ausschalten der zusätzlichen CSS Dateien hat zwar durcheinander bringen können, mich allerdings nicht wirklich erleuchtet.

---

Mein 'quickfix' löst auch das zweite Problem nicht. Dafür gibt es jetzt verschiedene Ansätze.

• Du könntest zB mit einem Media Query den #wrapper mit einer min-width:720px versehen ab einer Viewport Größe von inkl. 768px (dann geht es sich aus - 720px / 3 = 240px).
• Oder du machst #left und #right kleiner (was du aber wohl nicht willst).
• Oder du entfernst width:90%; vom #wrapper. (Oder alternativ auch nur über einen Media Query unter einer bestimmten Größe, zB unter inkl. 800px.)
• ...

Danke für die weiteren Hinweise, werde versuchen sie heute nachmittag umzusetzen, sobald ich an meinem Rechner bin.

Ich verzweifle leicht:
Es bleibt gleich, ob ich Responsive Grid oder Layout Builder einzeln ein oder ausschalte, nur wenn beide ausgeschaltet sind ünernimmt #main die volle Breite.
#wrapper width:90% ist entfernt, keine Änderung; ebenso bringt es keinerlei Änderung, wenn ich #left und #right auf max-width:180px setze: #main lässt Platgz für #left, obwohl #left erst unten nach #main folgt.
Hat noch jemand eine Idee?

Zitat:

---

Zitat von gesti

Ich verzweifle leicht:
Es bleibt gleich, ob ich Responsive Grid oder Layout Builder einzeln ein oder ausschalte, nur wenn beide ausgeschaltet sind ünernimmt #main die volle Breite.
#wrapper width:90% ist entfernt, keine Änderung; ebenso bringt es keinerlei Änderung, wenn ich #left und #right auf max-width:180px setze: #main lässt Platgz für #left, obwohl #left erst unten nach #main folgt.
Hat noch jemand eine Idee?

---

Alles nach der Reihe, die von mir vorgeschlagenen Änderungen haben die von mir erwähnten Probleme behoben ;). Nun ist zwischen 768px und 800px platz für #left und #right und bei dieser Viewport Größe passt nun alles. Warum es unter dem 768px break-point zu dem freien Platz links von #main kommt habe ich auf die Schnelle allerdings noch nicht herausgefunden.

Zitat:

---

Zitat von Spooky

Warum es unter dem 768px break-point zu dem freien Platz links von #main kommt habe ich auf die Schnelle allerdings noch nicht herausgefunden.

---

Das ist das Logo welches diesen Abstand verursacht:

HTML-Code:

---

<figure class="image_container float_left" style="height:220px;width:200px;margin:10px 10px 10px 0px; padding-right:20px; padding-left:0; float:left;">
<a href="start.html">
<img src="files/SuS/content/grafiken/LogoBadStudio.png" width="218" height="113" alt="Logo">
</a>
</figure>

---

Das floatet nach links und reicht zu weit hinab. Deswegen bleibt der Rest dann dort hängen …

Hallo Dexter,
manchmal sieht man den Wald vor Bäumen nicht.
Die Lösung war so genial wie einfach. DANKE!