Question

When viewed in a mobile phone in portrait mode, images are displayed two columns per row with each image container having a width of 50%.

Sometimes though, you only get one image per row. It seems totally random!
If you flip the phone to landscape mode, the images are displayed 3 columns per row and everything works fine.

Here’s an image so you can see what I mean:

As you can see the cobra glove is all on its own! The problem can be reproduced in Firefox if you resize the window so you only get 2 images per row.

If you go to http://www.snowrepublic.co.uk/ and hit the ‘switch to mobile’ button at the bottom of the page (black mobile phone looking icon) then select the ‘gloves’ category you can see for yourself. The strange thing is, if you hit the ‘body armour’ category, the exact same layout works perfectly.

Answer 1

Your issue is caused by the fact that your .centeredContent element has no height and when there is less content in one of the boxes then the box below it jumps up a little bit ( which is the normal behavior for floated elements ).

To fix it give the .centeredContent a height that will accommodate the most possible content. In your case 260px seems to be enough:

.centeredContent {
    ...
    height: 260px;
}