Responsive design feature not quite working

The special homepage on Widely displays 4 posts in a row then 3 posts in a second row. I have used CSS to hide the second row of 3 posts. However, I have been checking the site on various devices for responsiveness, and on phones, the first and last column display correctly in a single column, while the 2nd and third columns are squished together in one column. Is this a theme fault perhaps or is it something to do with me hiding that 2nd row of posts.

I tested the home page at a small width by using the responsive design mode button in the web inspector in Firefox 24. Here is how the demo version of Widely looked at a screen size of 360x640: https://i.cloudup.com/GUBiVlU9x3.png

Can you confirm that the funny spacing on the right shown in my screenshot above is what you're referring to?

Note that it makes sense that the number of posts per row may vary for a responsive design, so I think it may be intentional that fewer posts may appear per row in some cases, but I don't think there should be large gaps as shown in my test example above. Are those kinds of gaps also what you are seeing? If not, if you could please provide a screenshot that would be very helpful. You can use a service such as http://snag.gy/ to post the screenshot if needed.

You can see in the screenshot (phone resolution), that there is a single column (4th) at the bottom, (which is the same as the 1st incidentally) but the 2nd and 3rd columns are combined. I would have thought that each column would display separately, albeit narrower, but not "squashed" together.

I wonder whether this is something in the "mother-ship" template coding which needs tweaking.