Between 768 and 991 pixels, the "Refine your search" area gets pushed to the very bottom of the page. Instead, it should either hide it (if min-width is below 768px) or we should show it side-by-side using 16.667% and 83.333% for the two columns (as we do with min-width of 992px. I don't know why .order-md-first and .order-first are used for the main search result area either as it seems completely unnecessary?
As a workaround, I'm using the following in OPACUserCSS: @media screen and (min-width: 768px) and (max-width: 991px) { body#results .col-lg-2 { max-width: 16.667%; } body#results .col-lg-10.order-md-first { max-width: 83.333%; } } body#results .col-lg-10.order-md-first { order: inherit; }
A screen shot would be helpful :)
Created attachment 135332 [details] Screenshot of styling issue As per Frido's suggestion, I've attached a screenshot. I'm not sure if it's quite clear what I mean here, but I could try to add more tomorrow if more clarification is needed. (Just on my way out the door.)
Basically, either emulate or use a small screen, do a test search, and then scroll down to the bottom. You'll see that the facets are at the bottom of the screen inside of the left side or in a collapsed menu at the top.
This sounds like Bug 29603.
*** This bug has been marked as a duplicate of bug 29603 ***