Soms kom je een theme tegen die helemaal voldoet aan de eisen. Met wat nep content getest en alles werkt naar behoren. Behalve dat je een post niet in 1 maar in 2 kolommen wil verdelen.

Dat overkwam mij met de installatie van JPRO Cars. Een plugin die het mogelijk maakt voor auto dealers om hun occasions te beheren en aan te bieden. Werkelijk tientallen themes geprobeerd maar vooral met de manier waarop tabellen zichtbaar gemaakt moesten worden ging het bij vrijwel allemaal mis. De enige die werkte was perfect, maar zoals al gezegd: 1 kolom. De klant wilde dat zijn nieuwe website exact hetzelfde er uit zag als de vorige. (De vorige was een HTML, niet responsive en het beheer gedeelte was “gestruikeld” na de laatste PHP update van zijn hoster)

Nu vraagt JPRO dat je een single.php kopieert, hernoemt in single-wpcm.php en DAAR in de hooks aanbrengt (routines die blokken met gegevens zichtbaar maken) Dat voordeel maar uitgebuit door de content in 2 delen te hakken… 2 kolommen. In het kort komt het hier op neer:

Dan blijft er nog een stukje CSS over om het geheel vorm te geven. De linker kolom wordt 39% en de rechter 59%. Twee procent ruimte er tussen.
Dit geldt dan voor beeldschermen boven 768 pixels.

En toen dook kijn grootste probleem op. Op de PC moest de linker kolom de linker kolom blijven, maar op beeldschermen kleiner dan 768 kwam de linker kolom als eerste. Ik wilde juist de 2e kolom (de foto en prijs van de auto) boven aan hebben op telefoons. De kolommen moesten dus van plaats wisselen bij beeldschermen onder de 768.
Ik kan een lang verhaal kort maken. Dat wil niet. Maar het kan wel bij grote beeldschermen ! Daar mag je met CSS WEL de volgorde bepalen. En dan komt de truc. Ik heb dus de linker kolom op PC rechts gezet. CSS duwt hem dan naar links. Maar omdat het in werkelijkheid het laatste blok is verschijnt hij als laatste op een klein scherm. Op PC’s doet CSS het net lijken of deze links staat. Omgekeerde wereld, maar wat maakt het uit. Het werkt.