Afbeeldingen in mobiele weergave veel te groot

Opgelost buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

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)

1 2 →

Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

https://ibb.co/55dsDMh

https://ibb.co/0X02dvN
Guido
(@guido07111975)

3 jaren, 6 maanden geleden
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
Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

Hoi Guido,

Bedankt voor de reactie. Helaas maakt dit geen verschil 🙁

Groetjes,

Buck

https://ibb.co/XtTCvv3
Guido
(@guido07111975)

3 jaren, 6 maanden geleden
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
Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

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)

3 jaren, 6 maanden geleden
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
Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

Deze werkt helaas ook niet 🙁

Guido
(@guido07111975)

3 jaren, 6 maanden geleden

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)

3 jaren, 6 maanden geleden
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
Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

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)

3 jaren, 6 maanden geleden

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

Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

Hoi Guido,

Ik heb hem tijdelijk open gezet:

https://oehbaby.nl/

Groetjes,

Buck
Guido
(@guido07111975)

3 jaren, 6 maanden geleden
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
Thread starter buckbaggen
(@buckbaggen)

3 jaren, 6 maanden geleden

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)

3 jaren, 6 maanden geleden
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)

1 2 →

Het onderwerp ‘Afbeeldingen in mobiele weergave veel te groot’ is gesloten voor nieuwe reacties.

Weergaven