CSS-Code behindert irgendwie Bildergalerie :-(

Bei ferzat.attinger.ch habe ich in der Custom.less folgenden Code eingegeben, damit die 4 Bilder im Quardrat auch in einer Ipad und in einer Handyansicht als Quadrat ausgegeben wird:

@media (min-width: 768px) and (max-width: 979px) {
.row-fluid {
    width: 100%;
    display: flex;
    margin-top: 17px;
    }
 } 

@media (max-width: 768px) {
.row-fluid {
    width: 100%;
    display: flex;
    margin-bottom: -15px;
    }
} 

Ja, musste den fast gleichen Code 2 x nehmen. Hat aber funktioniert. So weit so gut. Nun habe ich mal, zu Testzwecken in der arabischen Sprache, eine Bildergalerie installiert. Mit dem obigen Code, wird diese partout in den mobilen Ansichten nicht mittig angezeigt, sondern entweder ganz rechts oder ganz links. Nachdem ich nun obigen Code rausgenommen habe, ist die Bilderansicht der Galerie perfekt!

Wie kriege ich es nun hin, dass mir sowohl die 4 Bilder als Quadrat in einem mobilen Devise angezeigt werden, als auch die Galerie funktioiert?

Zuerstmal würde ich nicht eine Regel für ".row-fluid" machen. Das wirkt sich dann auf die ganze Seite aus, du willst aber ja nur die Bildergallerie anpassen.
Wenn du die Regel stattdessen für ".bilderquartett .row-fluid" machst, gilt sie nur explizit für die Gallerie.

Ich habs mal kurz geschaut, auf Desktopgrösse und bei ganz kleinen Bildschirmen scheint es zu funktionieren. Nur dazwischen ist es verschoben. Da geht irgendwo eine Breite nicht auf und die zwei Bilder welche nebeneinander sein sollten rutschen untereinander. Der Versatz ist da der Abstand der eigentlich dazwischen sein sollte.

Wow, genial. So funktionierts!!! Bin dir so dankbar für die Hilfe.

Sag mal, hast du kein Twint?

Twint nicht, aber unten auf der Seite hats nen kleinen Spenden-Knopf von Paypal. Falls du unbedingt Geld loswerden musst

Grad endlich mal erledigt! Du machst mit dem Support so einen tollen Job, das hast du verdient

Danke vielmal