Ekstra 2: Styr antal kolonner på tablet og mobil

Har du med Divi Builderen tilføjet en række med fx tre kolonner, vil disse på tablets og mobil blive vist ovenover hinanden. Ønsker du at ændre dette layout, kan du bruge denne guide.

Tilføj CSS kode

Under Divi > Temaindstillinger tilføjer du nedenstående CSS kode. For at opnå 3 kolonner, skal kolonnerne have en max-bredde på 33.33%. For at opnå 2 kolonner, skal kolonnerne have en max-bredde på 50%. Ønsker du afstand mellem kolonnerne, vælger du en lidt lavere procent, som jeg har gjort i koden herunder.

See the Pen
Styr antal kolonner i Divi tablet og mobil by Mads Gram-Hansen (@madsgram)
on CodePen.

Tilføj CSS klasser til din række

Når du har tilføjet CSS-koden, mangler du blot at tilføje de ønskede klasser til de række, hvor du vil ændre på kolonne-strukturen på tablet og mobil. Når du tilføjer klasserne, bliver den definerede kode anvendt.

Ønsker du 3 kolonner på tablet, tilføjer du “tablet-tre-kolonner”. Ønsker du 2 kolonner på mobil, tilføjer du “mobil-to-kolonner” osv.

Klasserne tilføjer du i feltet CSS Klasse i rækkens indstillinger under Avanceret > CSS ID og Klasser. Klasserne skrives uden anførselstegn, og der skal være mellemrum mellem de enkelte klasser.