Weird problem with search results

Hi,

I have a site running on v3.6 and it is all well except for the search results page.  My settings are for 42 products per page in Configuration > Settings > Catalog Settings > Search.

I also customized the CSS to give me 6 products per row for category pages, which also applies to the search results page.

When I run a search that I know will return more than 42 products, each page at random will come back with 42 products, then the next will have 38, then 40 and so on.  Sometimes the third page will have 42, sometimes none of them.

I appreciate any help you can provide.

Are your 'item-box' divs limited in size (have a max-height)?

I've had layout issues before when one product name required two lines or something similar was affecting the height of each item in the layout. It cause some rows to skip a spot if the space was intruded upon by the item above.

Just a guess.

That's an interesting concept.  I've seen that situation before but in my case they don't have a max-height or a height.

I'm attaching a screenshot of what it looks like for reference and below are the CSS rules that applied to the item-box.  As you can see, we are on page 2 and there are 5 + pages, yet this page has three empty spaces where three item-boxes should go.

This page in particular has 39 item-boxes, the next one only came with 33, go figure!

@media (min-width: 1200px)
.product-grid .item-box {
    margin: 0 5px 5px 0;
}
@media (min-width: 961px)
.product-grid .item-box {
    margin: 0 5px 5px 0;
    width: 16.1%;
}
@media (min-width: 1201px)
.product-grid .item-box {
    margin: 0 5px 5px 0;
    overflow: hidden;
}
@media (min-width: 1201px)
.item-box:nth-child(4n+1) {
    clear: both;
}
@media (min-width: 1201px)
.item-box:nth-child(3n+1) {
    clear: none;
}
@media (min-width: 961px)
.product-grid .item-box {
    width: 250px;
    margin: 0;
    overflow: hidden;
}
@media (min-width: 961px)
.item-box:nth-child(4n+1) {
    clear: both;
}
@media (min-width: 961px)
.item-box:nth-child(3n+1) {
    clear: none;
}
@media (min-width: 769px)
.product-grid .item-box {
    width: 33.333%;
}
@media (min-width: 769px)
.item-box:nth-child(3n+1) {
    clear: both;
    margin-left: 0;
}
@media (min-width: 769px)
.item-box:nth-child(2n+1) {
    clear: none!important;
}
@media (min-width: 481px)
.product-grid .item-box {
    float: left;
    width: 50%;
}
.product-grid .item-box {
    margin: auto;
    width: 90%;
    max-width: 250px;
}
@media (min-width: 769px)
.item-box {
    width: 33.333%;
}
.item-box {
    position: relative;
    width: 100%;
    margin: 0 0 20px;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
* {
    margin: 0;
    outline: none;
    padding: 0;
    text-decoration: none;
}
user agent stylesheet
div {
    display: block;
}
Inherited from div.page.search-page
.page {
    clear: both;
    text-align: center;
}
Inherited from body.notAndroid23.color-sugar
body {
    font: normal 13px 'Helvetica Neue', Helvetica, sans-serif;
}
body {
    max-width: 100%;
    background: #fff;
    font: normal 13px "Trebuchet MS",Arial,Helvetica,sans-serif;
    overflow-x: hidden;
}
Inherited from html.k-webkit.k-webkit55
html {
    margin: 0!important;
    -webkit-text-size-adjust: none;
}
Pseudo ::before element
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

It is never more products than the setting, it's alway less or the number I have set; 42.