Responsive Grid

Hallo zusammen!

Ich habe eine Frage zu meiner Webseite http://www.timrodenbroeker.de :

Auf der Startseite sind alle meine Posts zu sehen. Ich habe im stylesheet global das Box-Model auf "border-box" gestellt den einzelnen <article>-Elementen ringsherum ein Padding verpasst.

Jetzt kommt das Problem: Jetzt schliesst der Loop-Bereich links und rechts nicht mehr bündig mit dem #Wrapper ab, weil der erste <article> einer Zeile ein Padding links, und der letzte <article> einer Zeile ein Padding rechts hat. Aus Designperspektive finde ich das nicht besonders elegant. Frage: Kann man das Problem ohne allzu großen Aufwand lösen?

Ich danke euch schonmal präventiv und wünsche ein schönes Wochehende!

Tim

Hi, danke, das sieht vielversprechend aus!!

Ich scheine allerding noch irgendetwas falsch zu machen:

Das erste Element bekommt ein Padding-links von 0px

article:nth-child(1) {padding-left: 0px !important;}

Das vierte Elemente bekommt ein Padding-rechts von 0px

article:nth-child(4) {padding-right: 0px !important;}

Damit müsste es doch eigentlich in der ersten Zeile klappen, oder?

Hey pixselig, vielen Dank!

Es funktioniert! Jetzt tritt allerdings ein anderes Problem auf: Da ich mit einer relativen Breite arbeite und das box-model "border-box" verwende, ändert sich die Breite des ersten Elements. Da darf natürlich nicht sein! Alle Elemente müssen gleich groß sein. Hast DU eine Idee, wie ich das lösen kann?

Hier kannst Du den Fehler sehen: http://www.timrodenbroeker.de/

UPDATE: Ich habe es hinbekommen! Das umstellen des Box-Modells für <article>-Elemente war die Lösung. Danke pixselig für Deine Hilfe!!! Grüße, Tim