Support » CSS / opmaak vragen » Afbeeldingen in mobiele weergave veel te groot

  • Opgelost buckbaggen

    (@buckbaggen)


    Beste allemaal,

    Ik gebruik WordPress 5.5 met Woocommerce en het Easystore thema.

    Als ik op de homepahina een block toevoeg met artikelen (maakt niks uit welke soort, nieuwe, bestsellers, populair etc.) dan stel ik in 5 columns en 1 row.

    Op de desktop site ziet het netjes uit en komen ze ook mooi naast elkaar. Echter bij de mobiele site dan worden de foto’s praktisch fullscreen en komen ze gewoon onder elkaar.

    Iemand enig idee hoe dit op te lossen?

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

    (@guido07111975)

    Hallo,

    Dat is nu eenmaal zoals dit thema de producten weergeeft op mobiel scherm. Je zou dit een kunnen proberen, voeg dit toe op de Extra CSS pagina van de Customizer in je dashboard:

    
    @media (max-width: 600px)
    .es-cat-products-wrapper .product {
        width: 48%;
    }
    

    Dit stond op 98%. Voor schermen van max 600px breed blijven er nu 2 naast elkaar staan. Maar misschien is dit weer te klein op een mobiel met echt klein scherm.

    Guido

    Hoi Guido,

    Bedankt voor de reactie. Helaas maakt dit geen verschil πŸ™

    Groetjes,

    Buck

    https://ibb.co/XtTCvv3

    Guido

    (@guido07111975)

    Hallo Buck,

    Ik heb een demo van het Easystore thema bekeken om deze CSS te bepalen, heb je ook een link van je site? Is handiger voor mij.

    Je kunt eerst ook nog even !important aan de breedte toevoegen:

    
    width: 48% !important;
    

    Important overschrijft de rest.

    Guido

    Hoi Guido,

    Bedankt voor het meekijken en denken.

    Ik heb het toegevoegd maar ook dit maakt helaas geen verschil.

    Kan ik je ergens hoe in een privΓ© bericht de site sturen, deze is nog in de maak en nog niet openbaar namelijk πŸ™‚

    Groetjes,

    Buck

    Guido

    (@guido07111975)

    Ik heb het thema nu zelf even geinstalleerd, dit zou het moeten zijn:

    
    @media (max-width: 600px) {
    	.woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product {
    		width: 48%;
    	}
    }
    

    In mijn eerste CSS snippet had ik sowieso een fout gemaakt, zie ik nu.

    Guido

    Deze werkt helaas ook niet πŸ™

    Guido

    (@guido07111975)

    Ik heb de gratis versie vh Easy Store thema gebruikt en dit werkt bij mij wanneer ik de winkelpagina in mobiel bekijk (2 producten naast elkaar). Als dit bij jou niet werkt, zou je nog even de cache van je browser kunnen opschonen. Als het dan nog niet werkt, zul je even moeten wachten totdat je wel een live versie online hebt staan en ons een link kunt geven.

    Guido

    Guido

    (@guido07111975)

    Voor de volledigheid, mijn eerst CSS snippet was fout, moet zijn:

    
    @media (max-width: 600px) {
    	.es-cat-products-wrapper .product {
    		width: 48%;
    	}
    }
    

    Maar ik zie nu dat deze alleen voor de productcategorie-sectie op de homepage is.

    Guido

    buckbaggen

    (@buckbaggen)

    Hoi Guido,

    In mijn geval gaat het om de ‘Newest products’ en de ‘Best selling products’.

    Weet je daar wellicht de juiste code voor toevallig?

    Groetjes,

    Buck

    Guido

    (@guido07111975)

    Ik stel voor dat je de site eerst live zet zodat we dan weer eens kunnen kijken. Zonder link vd betreffende site is het erg lastig om je te helpen. Ik moet in de code van de site kijken, en dit thema heeft verschillende manieren om producten te tonen, merk ik.

    Guido

    buckbaggen

    (@buckbaggen)

    Hoi Guido,

    Ik heb hem tijdelijk open gezet:

    https://oehbaby.nl/

    Groetjes,

    Buck

    Guido

    (@guido07111975)

    Hoi,

    Volgens mij heb je een WooCommerce widget gebruikt voor de Nieuwe en Populaire artikelen, staat los van het thema.
    Het is erg lastig en misschien zelfs onverstandig om de CSS hiervan te veranderen. Maar als je de foto’s in mobiel scherm te groot vindt, kun je ervoor kiezen om het product in kleiner scherm iets minder breed te tonen:

    
    @media (max-width: 480px) {
    	.wc-block-grid__product {max-width: 60% !important;}
    }
    

    Guido

    Hoi Guido,

    Top, thanks! Nu kan ik het formaat naar wens aanpassen met de percentages πŸ˜€

    Heb je of weet je toevallig ook nog een code zodat ik er 2 naast elkaar kan krijgen? Ze blijven nu onder elkaar al zet ik ze op 10%.

    Groetjes,

    Buck

    Guido

    (@guido07111975)

    Klopt, maar ik had al doorgegeven dat het niet heel verstandig is om veel aan de CSS te wijzigen, omdat ik ook niet weet waar die CSS allemaal gebruikt wordt op de site. Dus op eigen risico:

    
    @media (max-width: 480px) {
    	.wc-block-grid__product {max-width: 50% !important; float: left;}
    }
    

    Guido

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