In einigen Fällen kann es sein, dass die Breaking-Points der Spalten in Divi nicht deinen Vorstellungen entsprechen. In folgendem Beispiel sind die Kontaktinformationen 3-Spaltig angeordnet, was für die Darstellung auf großen Monitoren optimiert ist.
Auf Mobilgeräten werden die drei Blöcke untereinander dargestellt. Das Problem taucht in diesem Fall auf Tablets auf. Hier werden die Spalten, wie auf Smartphones, untereinander dargestellt, was zu viel Weißraum auf der linken und der rechten Seite des Inhalt-Blocks führt.
Spalten Breaking-Point anpassen
Bis zu einer Display-Breite von 750 Pixeln soll die Darstellung hier auch 3-Spaltig sein. Um das zu erreichen legen wir eine CSS-Klasse mit dem Namen column_1_3_tablet an, die wir der betroffenen Zeile zuweisen.
Diese Klasse wird jetzt in der CSS-Datei wie folgt definiert:
@media (min-width: 750px) {
.column_1_3_tablet .et_pb_column_1_3 {
width: 31.3333%;
margin-right: 3%;
}
.column_1_3_tablet .et_pb_column_1_3.et-last-child {
margin-right: 0 !important;
}
}Mit dem Media-Query wird festgelegt, bis zu welcher minimalen Viewport-Breite die Klassen angewendet werden sollen.
@media (min-width: 750px) {}In diesem Bereich werden die entsprechenden Klassen von Divi überschrieben. Zum einen, dass die Breite die vordefinierten 31.3333% beibehalten sollen und auf der rechten Seite ein Außenabstand (Margin) von 3% hinzugefügt werden soll und zum anderen, dass die letzte Spalte keinen Außenabstand (Margin) haben soll.
.column_1_3_tablet .et_pb_column_1_3 {
width: 31.3333%;
margin-right: 3%;
}
.column_1_3_tablet .et_pb_column_1_3.et-last-child {
margin-right: 0 !important;
}Nachdem die Änderungen gespeichert werden, werden die Spalten nun bis zu einer minimalen Breite von 750 Pixeln nebeneinander dargestellt.