Query loop, aantal kolommen eerder laten aanpassen bij bepaalde schermbreedte

  • rjp92

    (@rjp92)


    1 jaar geleden

    Hoi mede WordPress gebruikers,

    Ik ben bezig om van Elementor af te komen, voor mij te veel problemen.
    Alleen nu wil ik de posts in een query loop laten verschijnen (Gutenberg). Bijna alles krijg ik voor mekaar wat ik wil behalve dat de aantal kolommen worden aangepast naar de breedte van het scherm. Ik wil dat bij een bepaalde breedte eerst de kolommen van 4 naar 2 gaan en bij nog smaller scherm naar 1 kolom.

    Zo ver ik weet zit dit niet in de query loop functie (kolommen worden alleen onder elkaar gezet als het scherm heel smal wordt > mobiel). Hierdoor wordt vanaf een bepaalde schermbreedte de weergeven posts zo small dat het er niet meer mooi uitziet en onleesbaar wordt.

    Nu had ik wat rond gezocht en chat gpt gevraagd en die kwamen met de volgende css code:

    /* Schakel naar twee posts per rij bij schermen smaller dan 768px */
    @media (max-width: 768px) {
    .mijn-query-loop-grid .wp-block-query-loop-grid {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    }
    }

    /* Schakel naar één post per rij bij schermen smaller dan 480px */
    @media (max-width: 480px) {
    .mijn-query-loop-grid .wp-block-query-loop-grid { grid-template-columns: 100%;
    }
    }


    Alleen als ik dit invoeg in de site editor (twenty-twenty-four theme) en CSS Class in de query loop op de betreffende pagina, dan gebeurd er niets aan de voorkant. Ik heb daarbij ook andere code uitgeprobeert op andere blokken / tekst en het lijkt erop of het CSS gewoon allemaal niet werkt, wat ik ook doe. Ik weet niet of dit aan de site of iets dergelijks ligt, of de code is niet goed.

    Graag heb ik hier hulp bij om alsnog het gewenste effect in de query loops te krijgen die ik wil.

    Gr Ron

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

    (@guido07111975)

    1 jaar geleden

    Hoi Ron,

    Ik ben bezig om van Elementor af te komen, voor mij te veel problemen.

    Goed plan 🙂

    Heb je ook een link naar je website, want dan kunnen we even meekijken.

    Guido

    Thread starter rjp92

    (@rjp92)

    1 jaar geleden

    Hoi Guido,

    Ik heb het in principe nog allemaal offline staan om het eerst allemaal uit te proberen.
    Ik heb net wel even een pagina online gezet met de query loop, alleen ik weet niet of er meer te zien is:
    sajenn.eu/nl-camper/query-loop-test/

    Bovendien ben ik nu ook met essential addons bezig om te kijken of ik het daar beter mee kan doen. Maar helaas doet ie daar ook wat gekke dingen mee.

    Gr Ron

    Guido

    (@guido07111975)

    1 jaar geleden

    Hoi Ron,

    Op deze pagina van je site zou onderstaande CSS doen wat je wilt:

    /* Schakel naar 2 posts per rij bij schermen van 481 tot 768px */
@media (min-width:481px) and (max-width:768px) {
	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}


/* Schakel naar 1 post per rij bij schermen kleiner dan 481px */
@media (max-width:480px) {
	.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
		grid-template-columns:1fr;
	}
}

    Overigens ben ik geen fan van het wijzigen van complexe CSS zoals dit, omdat de kans bestaat dat het dan niet in ieder scherm goed weergegeven wordt.

    Guido

    Thread starter rjp92

    (@rjp92)

    1 jaar geleden

    Hoi Guido,
    Bedankt voor je snelle antwoord. In de tussentijd ben ik zeer druk bezig geweest om de site zo snel mogelijk om te kunnen zetten. Dat is op wat dingen na gelukt. Alleen wel een heel heel hoop werk.

    Voor de posts te laten zien heb ik nu een post block van essential eddons toegepast. Voor nu laat ik dat even staan ondanks dat ik daar ook wat problemen mee heb. Het is namelijk zo dat de lijst met to do’s alleen maar langer wordt en ik dus niet op alle punten gelijk aandacht kan geven.

    Zodoende neem ik jou code wel mee, maar ik ga er niet meteen mee aan de gang omdat ik daar gewoon even de tijd niet voor heb. Zijn er alsnog problemen dan laat ik dat weten.

    Bedankt!
    Gr Ron

    Guido

    (@guido07111975)

    1 jaar geleden

    Hoi Ron,

    Bedankt voor je update en succes verder!

    Guido

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Het onderwerp ‘Query loop, aantal kolommen eerder laten aanpassen bij bepaalde schermbreedte’ is gesloten voor nieuwe reacties.