How to space the thumbs out evenly?

I just checked your site and if you put the width code above. You also need to set a.crp_link to width 100%

I did notice that the images are missing right now so that will need to fixed first.

Thanks Ajay!

I got this working pretty well. I’ll post the code here in case anyone wants to have a go themselves… flex-box seemed to do the trick.

Here’s the layout in action:

https://www.homegymexperts.co.uk/reviews/whats-best-treadmill-200-can-buy.html

Here’s the CSS

.crp_related {

width: 100%;

}

.crp_related ul {

display: flex;
display: -webkit-box; /* OLD – iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD – Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER – IE 10 */
display: -webkit-flex; /* NEW – Chrome */
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
width: 100% !important;
justify-content: space-between;
-webkit-justify-content: space-between;

}

.crp_related ul li {

width: CALC(33% – 30px);

}

a.crp_link {

width: 100%;

}

.crp_title {

display: inline-block;
width: 100% !important;
margin: auto;
max-width: 100% !important;
border-radius: 0 !important;

}

.crp_thumb {

width: 100%;
object-fit: cover;

}

Thanks for this. I’ll take a look at this.

I’ve implemented a similar layout using CSS Grid which you’ll find in the styles section.

I’ve made some tweaks to your code to make it more responsive – main changes are the ones at the end:

.crp_related {
  width: 100%;
}

.crp_related ul {
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  width: 100% !important;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

a.crp_link {
  width: 100%;
}

.crp_title {
  display: inline-block;
  width: 100% !important;
  margin: auto;
  max-width: 100% !important;
  border-radius: 0 !important;
}

.crp_thumb {
  width: 100%;
  object-fit: cover;
}

@media only screen and (min-width: 320px) {
	.crp_related ul li {
		width: CALC(50% - 10px) !important;
	}
}

@media only screen and (min-width: 700px) {
	.crp_related ul li {
		width: CALC(33% - 10px) !important;
	}
}

@media only screen and (min-width: 900px) {
	.crp_related ul li {
		width: CALC(25% - 10px) !important;
	}
}