Zo houd je 2 kolommen naast elkaar op mobiel

9 jun 2021 | MOBIEL

Marloes met laptop blog
DIVI maakt jouw website automatisch responsive. En dat is mooi! Op mobiel komen kolommen altijd onder elkaar te staan, wat ook meestal gewenst is. Maar soms wil je wèl heel graag 2 kolommen naast elkaar houden op mobiel! Ik laat je zien hoe.
twee-kolommen-naast-elkaar-op-mobiel

LET OP! Deze tutorial is in eerste instantie voor kolommen van een Rij. Voor hoe je afbeeldingen van de Galerij-module naast elkaar kunt houden op mobiel kun je stap 1 t/m 3 overslaan!

Stap 1: Ga in je Dashboard naar DIVI -> Thema Opties -> Aangepaste CSS

Plak daar de volgende CSS code:

/*2 KOLOMMEN NAAST ELKAAR HOUDEN OP MOBIEL*/

@media only screen and (max-width: 480px) {
.twee-kolommen-mobiel .et_pb_column {
width: 50%!important;
}
}

Door te zeggen dat de kolom een breedte moet hebben van 50% van het scherm, komen er dus 2 kolommen naast elkaar (want samen 100%).

TIP: Je kunt hier als width ook 33.3% of 25% vullen als je 3 of 4 kolommen naast elkaar wilt houden. Misschien dan ook de CSS klasse aanpassen naar drie-kolommen-mobiel of vier-kolommen-mobiel 😋.

Stap 2: Ga naar de Rij-instellingen

Vul daar in het tabblad Geavanceerd onder CSS-id en -klasses de CSS klasse twee-kolommen-mobiel.

Stap 3: That’s it!

Het kan zijn dat de Visual Builder er moeite mee heeft om dit correct te laten zien, dus bekijk je website dan op je mobiel ter controle.

Bij de Galerij-module

Hier gaat het anders, maar net zo eenvoudig!

Je gaat direct in de Galerij-instellingen naar Geavanceerd -> Aangepaste CSS en vult onder Galerij-item het volgende: width: 50% !important. Let op dat je het voor alleen mobiel invult!

TIP: Je kunt hier als width ook 33.3% of 25% hanteren als je 3 of 4 kolommen naast elkaar wilt houden (bijv. bij tablet).

BONUS: Wil je je kolommen / galerij-items schermvullend en zonder ruimte er tussen?

Zoals in mijn blogafbeelding?

Zet in de Rij-instellingen dan de Goot Breedte op 1 en de Maximale breedte en wijdte op de max!

Ik hoop dat ik je weer een glimlach heb bezorgd! Laat het me weten in de reacties als je nog vragen hebt 😊.

10 Reacties

  1. Inez

    Hoi Marloes!

    Dit was precies de tip die ik nodig had! Ben er zo blij mee! Maar, nu nog een vraag. Hoe kan ik het aantal kolommen aanpassen voor de tablet?
    Mocht je het weten, dan hoor ik het graag van je!

    Groetjes, Inez

    Antwoord
    • Marloes

      Super! Leuk om te horen :). Op de tablet worden al 2 kolommen naast elkaar aangehouden, maar als je er bijv/ 4 naast elkaar wilt houden kan je het volgende proberen:

      /*4 KOLOMMEN NAAST ELKAAR HOUDEN OP TABLET*/

      @media only screen and (min-width: 480px) and (max-width: 980px) {
      .vier-kolommen-tablet .et_pb_column {
      width: 25%!important;
      }
      }

      Succes!

      Antwoord
      • Inez

        Geweldig! Het lukt me nu zelfs om jouw codes (of hoe noem je dit?) te herschrijven zodat ik op tablet en mobiel 1, 2, 3, 4 of 5 kolommen kan maken. 💪🏼😊

        Antwoord
        • Marloes

          Haha klasse, dat voelt goed he! 😁 Zo leer ik het ook hoor, ben ook echt nog geen CSS pro, vooral veel Googlen ;).

          Antwoord
  2. Samantha

    Bedankt voor deze tip Marloes, precies wat ik zocht!

    Nu ziet het er op de PC prima uit als ik Divi in mobiele weergave zet, maar op mijn telefoon verspringt de tekst. Hoe zorg ik dat de tekst schaalt en op een rij blijft staan?
    Dankjewel alvast 🙂

    Groetjes, Samantha

    Antwoord
    • Marloes

      Hoi Samantha! Wat fijn 😃. Ja die mobiele weergave van DIVI wijkt heel vaak af van de daadwerkelijke mobiele weergave, dat is jammer. Je bedoelt denk ik de tekst van een kopje dan? Voor zover ik weet is er geen andere optie dan het lettertype dan verkleinen voor de mobiele versie. Dan zou ik het wel voor alle andere kopjes ook aanpassen om het uniform te houden. Of accepteren dat het verspringt. Of je tekst aanpassen hahah 🤓. Succes!

      Antwoord
  3. Kim

    Thanks voor deze tip! Ik heb er ook 3 kolommen op tablet van gemaakt, maar nu ‘plakt’ ie de afbeeldingen wel aan elkaar. Hoe kan ik toch ruimte tussen de 3 afbeeldingen creëren? Of wil ik weer iets dat niet kan 😉

    Antwoord
    • Marloes

      Je zou alleen voor mobiel een buffer kunnen toevoegen aan de afbeeldingen! Heb je verschillende afbeeldingsmodules of gebruik je de Galerij module?

      Antwoord
      • Kim

        Stom…soms denk ik te moeilijk 😉 Maar ik heb een cta gebruikt, maakt dat nog iets uit?

        Antwoord
        • Marloes

          Bedoel je de cta module en dan met een achtergrondafbeelding? Dan kun je op de hele cta een buffer zetten 🙂

          Antwoord

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd.

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!