Herken je dit, je hebt een site ontworpen en in de mobile weergave heb je twee afbeeldingen naast elkaar gezet. Je begint te bouwen in Divi en ontdekt dat er geen instelling is om dit op die manier weer te geven. Het zou vervelend zijn als je de klant moet uitleggen dat dit met jouw gekozen systeem niet kan. Het is iets eenvoudigs dat (zoals ik het zie met versie Versie: 4.23.1) nog niet mogelijk is zonder CSS. Ik laat je in een paar stappen zien hoe je dit zelf kunt oplossen:
- Open jouw visal builder en ga naar de rij toe waar de twee knoppen staan.
- Open de tab geavanceerd / advanced en klik dan CSS-id en -klasses
voer de css klasse “twee-kolommen”
- Sla deze instellingen op
- Sluit de visual builder af en sla je werk op
- Open de systeemaanpasser van thema
- Klik op extra css
- Voer nu onderstaande code in – in webdesign termen is dit een media Query waarmee je speciaal voor mobiel stijl kan zetten:
@media only screen and (max-width: 980px) {
.twee-kolommen .et_pb_column {
width: 50%!important;
}
}
In Jip en Janneke taal: Bovenstaande code zegt tegen de browser, dat op alle beeldschermen kleiner dan 980 pixels een rij met deze naam als twee kolommen moet worden weergegeven.
- Sla je werk op door te klikken op Publiceren
- Bekijk op je mobiele telefoon wat het resultaat is!
Verdieping
Als je nu drie elementen naast elkaar wilt zetten moet je het percentage veranderen in 33%: ik zou dan deze code gebruiken:
@media only screen and (max-width: 980px) {
.drie-kolommen .et_pb_column {
width: 33%!important;
}
}
Let er dan wel op dat je in de rij css instelling de klasse “drie-kolommen” gebruikt.
Een site waar ik dit heb toegepast is op de website van Nomad IT.
Dit is getest op basis van Divi Versie 4.23.1
