I want the images on this page to snap inline with each other so that there is not a big white space

 

http://dev.lecollective.co.uk/clients/2013/swanfield/

 

I'm not sure if this is possible with pure CSS?

Find this in the CSS:

.mosaicflow__item {
	padding:5px;
}

Replace it with this:

.mosaicflow__item {
	padding:0px;
}

Tried and tested.

Not sure I understand correctly

 

try changing the height on the code below to 400px see if thats what you want

 

.mosaicflow__item img {
display: block;
width: 100%;
height: auto;/*change this to the height you want the images*/
}

 

Not sure I understand correctly

 

try changing the height on the code below to 400px see if thats what you want

 

.mosaicflow__item img {
display: block;
width: 100%;
height: auto;/*change this to the height you want the images*/
}

 

That causes the elements to blow up in size. Also, as I said in my first post, it's a padding issue and I provided the tried-and-tested fix.

well you read his problem differently to me

 

so I shall bow down to your superior knowledge

well you read his problem differently to me

 

so I shall bow down to your superior knowledge

 

I'm certain he's referring to the white margins in-between all the images, which is caused by padding, and when I removed the padding on Chrome CSS editor it snapped them all together. No superiority or anything.

Thats the problem with reading things online were not really sure what the op is after

 

I read it as though he wants them to line up hence I said to try and see if thats what he wants. sorry for being a grouch

 

 

 

Thats the problem with reading things online were not really sure what the op is after

 

I read it as though he wants them to line up hence I said to try and see if thats what he wants. sorry for being a grouch

 

You could be right, we won't know until he replies, let's see.

i read it as mteam pointed out maby have something like :nth-child(even) to have different tile heights

 

you could use something like

<style>
	.holder {
		width:630px;
		height:600px;
	}
	
	.test {
		background:#00f;
		width:200px;
		margin:5px;
		height:400px;
        display: block;
		vertical-align: top;
		background-size:cover;
	}
	
	.col:nth-child(even) .test:nth-child(even) {
		height:200px;
	}
	
	.col:nth-child(odd) .test:nth-child(odd) {
		height:200px;
	}
	
	.col {
		width:200px;
		display:inline-block;
	}
</style>

<div class="holder">
<div class="">
	<div class="col">
		<div class="test" style="background-image:url('link/to/image.png');"></div>
		<div class="test" style="background-image:url('link/to/image.png');"></div>
	</div>
	<div class="col">
		<div class="test" style="background-image:url('link/to/image.png');"></div>
		<div class="test" style="background-image:url('link/to/image.png');"></div>
	</div>
	<div class="col">
		<div class="test" style="background-image:url('link/to/image.png');"></div>
		<div class="test" style="background-image:url('link/to/image.png');"></div>
	</div>
</div>

Edited July 5, 201313 yr by D4Y0