Bug 30841 - Responsiveness not working for some screen sizes on OPAC search results
Summary: Responsiveness not working for some screen sizes on OPAC search results
Status: RESOLVED DUPLICATE of bug 29603
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: 21.11
Hardware: All All
: P5 - low major (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2022-05-25 04:26 UTC by David Cook
Modified: 2022-05-25 23:36 UTC (History)
1 user (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Screenshot of styling issue (82.98 KB, image/jpeg)
2022-05-25 07:10 UTC, David Cook
Details

Note You need to log in before you can comment on or make changes to this bug.
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 ***