Uitlijning grid view op iMac

[StoerSnoer]

Hallo!

 

Een tijdje terug heb ik een tutorial gevolgd om mijn producten in gridview te krijgen, in plaats van in een lijst. Er kan nu ook worden geschakeld tussen lijst en grid.

Als ik mijn webshop (www.stoersnoer.nl) echter bekijk op een iMac, staan de producten niet goed uitgelijnd; ze verspringen heel erg (zie screenshot in de bijlage). Op een windows-PC is dit niet het geval, daar staan ze netjes in een grid.

 

Kan iemand mij misschien helpen? Het liefst zou ik de producten hetzelfde weergeven als de aanbevolen producten op de homepage.

Edited October 19, 2014 by StoerSnoer (see edit history)

[scorpionsworld]

Wijzig het volgende in je css:

De regels

 

#product_list_grid li {


	overflow: hidden;
	margin-bottom: 10px;
	padding: 10px;
	border: 1px solid #EEE;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	width: 153px;
	height: 270px;

}

vervangen met:

 

#product_list_grid li {


	overflow: hidden;
	margin-bottom: 10px;
	padding: 10px 5px;
	border: 1px solid #EEE;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	width: 153px;
	height: 270px;

}

 

en

 

#product_list_grid li h3 {


	padding: 5px;
	font-size: 13px;
	color: black;
	display: block;
	text-align: center;

}

vervangen voor

 

#product_list_grid li h3 {


	padding: 5px;
	font-size: 13px;
	color: black;
	display: block;
	text-align: center;
	min-height: 40px;

}

Dan werkt het in alle browsers prima

[StoerSnoer]

Dankjewel! Het is gelukt!

[StoerSnoer]

Helaas, ik dacht dat het opgelost was, maar op de iMac blijft een en ander verspringen. Is hier wellicht een andere aanpassing in de css voor nodig?