Bug 30841

Summary: Responsiveness not working for some screen sizes on OPAC search results
Product: Koha Reporter: David Cook <dcook>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: RESOLVED DUPLICATE QA Contact: Testopia <testopia>
Severity: major    
Priority: P5 - low CC: fridolin.somers
Version: 21.11   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Circulation function:
Attachments: Screenshot of styling issue

Description David Cook 2022-05-25 04:26:22 UTC
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?
Comment 1 David Cook 2022-05-25 04:26:40 UTC
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; 
}
Comment 2 Fridolin Somers 2022-05-25 06:55:13 UTC
A screen shot would be helpful :)
Comment 3 David Cook 2022-05-25 07:10:30 UTC
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.)
Comment 4 David Cook 2022-05-25 07:11:29 UTC
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.
Comment 5 Owen Leonard 2022-05-25 10:28:47 UTC
This sounds like Bug 29603.
Comment 6 David Cook 2022-05-25 23:36:50 UTC

*** This bug has been marked as a duplicate of bug 29603 ***