Masonry plaatjes naast elkaar Wordpress

Status
Niet open voor verdere reacties.
P

parkietenwinkel

Gebruiker
Lid geworden
14 jan 2011
Berichten
30
Goedenavond,

Hopelijk zit hier een deskundige op het gebied van css schrijven die een goede oplossing heeft voor het script van mijn masonry wordpress thema.

De bedoeling is om twee kolommen met plaatjes te krijgen op kleine schermen (zoals een mobiel) in plaats van 1 kolom. Tot nu toe heb ik de onderstaande code, maar ik krijg her en der een gat tussen de plaatjes (zie foto) en dat vind ik heel erg jammer. Mijn website is www.haakinformatie.nl

Code: 
@media (max-width: 767px) {
    .page-fluid-width.sidebar-position-right.menu-position-top .index-isotope.v3 .item-isotope {
        padding: 15px 5px !important;
        float: left !important;
        width: 49% !important;
    }
    .index-isotope.v3 article.pluto-post-box.format-quote .post-body {
        padding: 15px !important;
    }
}

Enig idee hoe ik die gatenkaas tussen de plaatjes weg krijg zodat ze mooi op elkaar aansluiten? Daar zou ik echt heel erg blij van worden :D

Groetjes,
Lisa

mod: code structuur gegeven voor leesbaarheid
 

Bijlagen

  • Screenshot_20210102-183939_Chrome.jpg
    Screenshot_20210102-183939_Chrome.jpg
    637,7 KB · Weergaven: 41
Laatst bewerkt door een moderator:
wat ik wel weet is dat wanneer je plaatjes naast elkaar en onder elkaar wilt, dan moet je ze uitlijnen op geen. Dus niet rechts, gecentreerd of links maar "geen" .

Lees deze eens: https://www.indigowebstudio.nl/plaatjes-naast-elkaar-in-wordpress/
wie weet heb je er wat aan.

Overigens ziet het er bij mij op mijn kleine laptopje goed uit (google chrome), echt mooi gedaan!
Maak ik mijn browser kleiner naar mobiel formaat, ziet het er ook goed uit. Zie foto
 

Bijlagen

  • IMG_20210103_113749.jpg
    IMG_20210103_113749.jpg
    1 MB · Weergaven: 30
Hoi Femke,

Bedankt voor je antwoord.
Als ik het uitlijnen eruit haal, dan krijg ik alle plaatjes onder elkaar. Dus dat lijkt helaas ook niet de oplossing. Echt een hersenkraker dit, haha.

Groetjes,
Lisa
 
Geen echte directe oplossing, maar heb je dit al gemeld bij de ontwikkelaars?
Die kunnen dit vast in een update verhelpen. Mocht je in de tussentijd een fix vinden, zorg dan ervoor dat je dit toepast in een Child-theme. Zo voorkom je dat wijzigingen in de thema's bij een update weer teruggedraaid worden.
 
De ontwikkelaars hebben mij de bovenstaande code gegeven en zeggen dat ik het zelf verder aan moet passen. Ze doen namelijk geen maatwerk coderingen. De standaard van dit theme is dat er maar één kolom zichtbaar is bij kleine schermen.
Ik gebruik inderdaad een child theme.
 
Speelt dit in een van hun functionaliteiten? Dan is het een bug?
Of heb je zelf al de template aangepast?

Werkt de functie ook zonder zonder child-template? Misschien kan je dan achterhalen wat er mis is?
 
Het thema is niet gebouwd rekening houdend met de mogelijkheid om twee plaatjes naast elkaar te hebben op een mobiel, ik denk dat daar dan het probleem zit. Verder heb ik niets in de php o.i.d. aangepast. Ik heb alleen de css code van mijn site aangepast.
Ik heb net de poging gedaan om de code in het originele thema te plaatsen en niet in de child theme. Het resultaat is hetzelfde helaas.
Moet ik het er op houden dat het te complex is om dit aan te willen passen?
 
Als het zonder child-template ook zo is, dan zou ik dit afrekenen op een bugje wat de makers mogen pletten.
Ik heb een vermoeden dat het met een float of een height te maken heeft.
 
Laatst bewerkt:
Het probleem zit 'm met name in de foto's die geen gelijke grootte hebben. Op de screenshot zie je dat de onderste foto niet naast de bovenste foto past omdat de bovenste foto te groot is. Afhankelijk van het formaat van het browser venster zal je dit "probleem" zien bij deze of andere foto's.

Oplossing: alle foto's vergroten en/of verkleinen en/of bijsnijden zodat ze allemaal dezelfde hoogte en breedte hebben (in pixels).


ongelijke-plaatjes.jpg
 
Laatst bewerkt:
bron zei:
Het probleem zit 'm met name in de plaatjes die niet een gelijke grootte hebben.
Op de screenshot zie je dat het onderste plaatje niet naast het bovenste plaatje past omdat het bovenste plaatje erg groot is.

Bekijk bijlage 354068
Klik om te vergroten...
Afbeelding werkt niet ;)
 
Bedankt dat jullie zo meedenken.
Zou het dan een oplossing zijn om de plaatjes in mobiele weergave vierkant te laten worden? Geen idee of daar een css code voor te schrijven is. De plaatjes zelf bijsnijden is namelijk geen optie.
 
Daar hoef je geen css voor te schrijven. Als het goed is doet de bestaande css van de theme dit goed. Doen is weten ;) Kwestie van de bovenste 10 foto's aanpassen en kijken wat het effect is. Als dan alles wel goed werkt kan je de rest van de foto's doen.

Helaas zit er nog een ander probleempje in deze theme en die is wat lastiger. Als de browser view (bruikbare deel van een browser) een breedte heeft tussen 958px en 1210px, dan worden alle foto's onder elkaar gezet i.p.v. naast elkaar.
 
Laatst bewerkt:
Aha, dat andere probleempje was me nog niet opgevallen.

Als ik de hoogte van de foto's op fixed zet, komen ze nog niet naast elkaar, omdat sommige titels van de berichten ook meerdere regels zijn (dat is het ene blok toch nog groter dan het andere blok). Als ik de titels ook weghaal, komen ze inderdaad keurig naast elkaar te staan. Wat een puzzel, :shocked:
 
Het probleem (browser resize) kan ik niet meer reproduceren, misschien omdat je een instelling hebt aangepast. Mijn vorige berichtje heb ik voorlopig even weggehaald. Wat het uiteindelijke effect is van fixed en flexibel weet ik niet bij deze plugin.

Als ik de hoogte van de foto's op fixed zet, komen ze nog niet naast elkaar, omdat sommige titels van de berichten ook meerdere regels zijn (dat is het ene blok toch nog groter dan het andere blok)
Klik om te vergroten...
Om te testen zouden totale breedte en totale hoogte gelijk moeten zijn.
Alle foto's een fixed hoogte, breedte op flexibel. Alle teksten een fixed hoogte (bijv. allemaal 130px hoog).
 
Laatst bewerkt:
Klopt. Als ik alle plaatjes en alle teksten even groot zou hebben, dan komen ze keurig naast elkaar te staan zonder gatenkaas.
Maar dat aanpassen is geen optie. Ik blijf plaatjes en titels met verschillende formaten hebben.

Ik heb nu de code als volgt aangepast en zo lijkt het wel ergens op, dus ik denk dat ik dit maar zo hou :d

Code: 
@media (max-width: 767px) {
    .page-fluid-width.sidebar-position-right.menu-position-top .index-isotope.v3 .item-isotope {
        padding: 15px 5px !important;
        float: left !important;
        width: 49% !important;
        height: 320px !important;
        display: flex;
        flex-flow: row wrap;
    }
    .index-isotope.v3 article.pluto-post-box.format-quote .post-body {
        padding: 15px !important;
    }
}

Dus deze 3 regeltjes heb ik toegevoegd:
Code: 
height: 320px !important;
display: flex;
flex-flow: row wrap;}

mod: code knopje voor betere leesbaarheid in de structuur
 
Laatst bewerkt door een moderator:
Af en toe kan ik wel het "browser resize" probleem reproduceren en af en toe niet.
Je kan het eenvoudig zelf reproduceren door (op pc) de breedte van je browser smaller en/of breder te maken.

Laat de muis boven de rechter rand van de browser zweven totdat je <--> ziet. Dan pak je de rand vast en maak je de browser smaller of breder. Bij een bepaalde breedte zie je het probleem, alleen als je een bepaalde instelling hebt.

resize-browser.jpg
 
Laatst bewerkt:
Maar dat aanpassen is geen optie. Ik blijf plaatjes en titels met verschillende formaten hebben.
Ik heb nu de code als volgt aangepast en zo lijkt het wel ergens op
Klik om te vergroten...
Je gaat uit van je eigen pc, tablet en smartphone maar niet van het apparaat en/of de browser die de website bezoeker heeft. Die laatste groep, de website bezoeker, lijkt mij belangrijker ;)

Foto's vergroten/verkleinen en bijsnijden zodat ze allemaal even groot zijn (hoogte én breedte van elke foto hetzelfde) is een tijdrovend klusje maar het is prima te doen. Dan is de helft van het probleem opgelost.

De andere helft van het probleem is het tekst blokje. je kan in de css het tekst blokje een vaste hoogte geven (bijv. height: 130px) zodat elk tekst blokje altijd 3 regels hoog is, ook al staat er maar 1 woord.
 
Laatst bewerkt:
Hij kan inderdaad raar reageren als je het scherm kleiner maakt :eek: Vanaf een bepaalde grootte komt de sidebar in beeld en dan wordt het weer een enkele rij met plaatjes en dan met verschillende formaten. Ja, dat soort gekke dingen oplossen, daar heb ik helaas niet de kennis en ervaring voor.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan