• Goedemorgen,

    Onderaan deze pagina staan 3 kolommen. In de desktopweergave zie je de inhoud van de kolom niet is uitgelijnd. De knoppen zitten niet op gelijke hoogte en de kolommen verschillen in lengte.

    Is hier een eenvoudige oplossing?

    Alvast bedankt!

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)
  • Guido

    (@guido07111975)

    Hoi,

    Je kunt de 3 kolommen met een flinke CSS fix even hoog maken en de knoppen onderaan vastzetten, alleen moet je ook rekening houden met verschillende schermgroottes. Vrij complex om dit netjes te doen.
    Daarom kun je er beter voor zorgen dat de witruimte (padding) bovenaan hetzelfde is en de afbeeldingen hetzelfde formaat hebben. Dan staan de titels even hoog, begint de tekst op dezelfde hoogte, en kun je met slechts een kleine ingreep (via CSS) de knoppen op dezelfde hoogte positioneren. En door de buttons verticaal te positioneren kun je de hoogte van de kolommen ook hetzelfde maken.

    Guido

    Thread starter jesuis15

    (@jesuis15)

    Hi Guido,

    IK heb de plaatjes even groot gemaakt (bijgesneden op 225×225). Er is nog steeds verschil in hoogte. Weet jij wat ik verkeerd doe?

    Guido

    (@guido07111975)

    Hoi,

    Je witruimte bovenaan is verschillend. Denk dat dit ligt aan de uitlijningsinstellingen van de 3 kolommen.

    Trouwens, je kunt met het afbeeldingsblok die je gebruikt ook een grotere afbeelding invoegen en deze schalen of bijknippen op maat.

    Guido

    Thread starter jesuis15

    (@jesuis15)

    Hi Guido,

    De hoogte van de fotos zat idd in de padding. Dat is nu hersteld. De titels en de tekst staan nu ook gelijk. De knoppen helaas nog niet. Weet je hier ook nog een oplossing voor?

    Guido

    (@guido07111975)

    Hoi,

    Wat je zou kunnen doen is het paragraaf blok (de tekst onder de kolom titel) een minimale hoogte geven. Daarmee kun je de knoppen op dezelfde hoogte positioneren.

    Geef het paragraaf blok die in elke kolom staat een extra CSS klasse, via de geavanceerde instellingen vh blok (kopje Geavanceerd). Voorbeeld: tenw-kolom
    Voeg daarna deze CSS toe op pagina Extra CSS vd Customizer:

    .tenw-kolom {min-height:250px;}

    Vergeet niet om de lege paragrafen die je extra toegevoegd hebt te verwijderen.

    Guido

    Thread starter jesuis15

    (@jesuis15)

    sorry , dit begrijp ik niet goed. is er nog een makkelijkere weg?

    Guido

    (@guido07111975)

    Ja, de tekst van alle 3 kolommen even lang maken.

    Guido

7 reacties aan het bekijken - 1 tot 7 (van in totaal 7)