Ben jij een codecracker?! Multicolumns CSS

Wil je in een html division (div) tekst en content opdelen in een gebalanseerde gecalculated layout van platte tekst naar een ‘multi column’ b.v. naar 2 kolommen. Gebruik dan onderstaande CSS code. 

/* On this page – the no columns parts */
.no-columns p
{
          column-count: 1;
          -webkit-column-count: 1; /* Chrome, Safari, Opera */
          -moz-column-count: 1; /* Firefox */
}
.multi-column
{
          column-count: 2;
          -webkit-column-count: 2; /* Chrome, Safari, Opera */
          -moz-column-count: 2; /* Firefox */
}
@media screen and (max-width: 770px)
 {
          .multi-column
          {
                     column-count: 1;
                     -webkit-column-count: 1; /* Chrome, Safari, Opera */
                     -moz-column-count: 1; /* Firefox */
          }
}

Je kunt b.v. via je Visual Composer een class toevoegen zoals ‘multi-column’, dat kan ook in HTML via de gebruikelijke wegen. Als je de code goed naleest dan vind je daar opdrachten die samenhangen met responsive websites. Dit houd in dat zoals in dit geval de 2 kolommen wordt samengevoegd beneden een schermbreedte van 770 pixels tot 1 kolom. Dit is alle code die je nodig hebt voor slimme layouts! Ben je een leek maar je denkt de code te begrijpen? Overweeg een toekomst in webdevelopment of webdesign!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *