Listing content section grid view

Ok, having removed all css from child theme and checked the way the listings page works again I note that it appears the page should work as outlined above with the number of boxes per row reducing as the screen width gets smaller and I simply broke it with some of the code I used!!

So back to the drawing board!! The problem I’m having is that the last listing for each row will often drop down to the next line.

eg with Customizr theme
Grid 5 will show 4 listings then a big blank space and the last listing from that line (with nth-child(5n+5) in code) will be pushed to the beginning of the line below. The same occurs for Grid 4 with only 3 listings on each line. Oddly Grid 3 works as expected but Grid 2 only shows 1 listing per row and a huge space (on a mobile screen where you would expect 2 listings it also only shows one per row aligned to the left).

I checked other themes and it doesn’t appear to be exclusively a Customizr theme issues. Its not so bad for Twenty Twelve but Grid 2 still ends up only showing one listing per row and then pushing the other listing below it. Strangely here the mobile version does behave as expected with 2 listings per row even though this layout doesn’t work correctly on a laptop screen.

I can make the listings fit and the grid behave as expected by changing the following, but this is the code which stopped the number of listings per row from changing:

.geodir_category_list_view li.gridview_onefifth {
width: calc(19.4% – 5.2px); – or leave at 20% and change px

I can make similar changes to .geodir_category_list_view li.gridview_onefourth and .geodir_category_list_view li.gridview_onehalf which also make the grid show the correct number of listings. But as soon as I change this in the css the number of rows no longer reduce as the screen gets smaller. eg with Grid 5 where the width has been changed it will now show 5 listings per row, but as the screen size gets smaller it will not adjust to 2 listings as before and just shrinks the listings in that row instead making them unreadable and overlapping things such as the ratings stars.

Any suggestions on how I can get the grids working correctly would be much appreciated.

I’m using theme Customizr v3.3.23 (also tested on Twenty Twelve v1.7) on WordPress v4.2.2. All plugins except Geodirectoy are deactived, and from child theme all css removed from style.css and functons.php also untouched.

The Geodirectory settings don’t seem to make a difference. I’ve tried this with both the right hand sidebar on and off but this makes no difference so I assume its something to do with the listings content section itself, I’ve also tried using the default widths for both the listing content and right hand sidebars as well as trying various others sizes for both these sections (including RH sidebar off and listing content set to 100%), but this still caused the last listing to drop to the line below.