Design/UX #8290


Problems with Commons profile on mobile view

Added by Matt Gold over 5 years ago. Updated about 5 years ago.

Priority name:
Daniel Jones
Category name:
Public Portfolio
Target version:
Start date:
Due date:
% Done:


Estimated time:


Hi All,

I noticed some responsiveness issues when viewing my Commons profile on my mobile phone (an iPhone). Here is what I noted:

-- areas of overlapping content
-- when one starts to scroll and the header snaps up, there are two issues -- 1. it snaps up before one can view all of the text in the header; and 2. In the snapped-up state (sorry -- that's probably not that right term, but I don't know what is), the header takes up more room than it should.

Please see attached screenshots. I know we are hoping to do a redesign, but I'm hoping that we can address at least a few of these issues in the short term before then.


mobile1.png (200 KB) mobile1.png Matt Gold, 2017-06-19 12:51 PM
mobile2.png (226 KB) mobile2.png Matt Gold, 2017-06-19 12:51 PM

Related issues

Related to CUNY Academic Commons - Bug #8463: Continued issues with portfolio view on mobile deviceResolvedDaniel Jones2017-08-03

Actions #1

Updated by Boone Gorges over 5 years ago

  • Assignee changed from Boone Gorges to Daniel Jones
  • Target version set to 1.11.4

Thanks for the ticket and the screenshots, Matt. We can definitely fix these items.

Dan, can I ask you to take a look? You may need to touch the JS to fix the "snap" point - see You should feel free to be liberal in making changes to the appearance of the header in narrow viewers; font size and padding look like they could use some adjustment as well.

Looks like you've already got push access to the repo - feel free to make your changes in a separate branch and then do a PR to master if you'd like a review from me before merging.

Actions #2

Updated by Boone Gorges over 5 years ago

  • Target version changed from 1.11.4 to 1.11.5
Actions #3

Updated by Boone Gorges about 5 years ago

  • Target version changed from 1.11.5 to 1.11.6
Actions #4

Updated by Daniel Jones about 5 years ago

I've made some changed that I think should improve the styling and behavior here:

It's hard to tell what CSS changed I made because I un-minified the file, but almost all of them are down at the very bottom in the media queries. Mostly I just reduced some spaces and sizes. I also fixed what I think was a bug, where on screens smaller than 940px you weren't able to see the buttons for saving or canceling your changes. That change was higher up in the sheet - let me know if you have trouble finding it.

The JS change was just to an option passed to a JS plugin to give more scroll-room before the sticky header starts to stick.

I also removed some styling from the bp-nelo stylesheet, in favor of keeping everything in the plugin itself. That change is here:

Let me know if all of this look alright!

Actions #5

Updated by Boone Gorges about 5 years ago

Thanks, Dan! I've applied the changes and they're looking pretty good in my testing.

The minified stylesheet in the plugin is due to the fact that the .css file is generated from the corresponding file in the /assets/sass directory. Do you mind porting your changes to the SASS stylesheet so that they're not lost? (I usually use Compass for SASS processing, but whatever tool you have is OK.)

Actions #6

Updated by Daniel Jones about 5 years ago

Well that's embarrassing - sorry about that. I've actually never really used any of the CSS pre-processors, so I had to get that set and up and configured. I think I've moved all the changes over and recompiled with this commit:

Actions #7

Updated by Boone Gorges about 5 years ago

  • Status changed from Assigned to Resolved

No embarrassment or apologies necessary! Thanks so much for making the changes. I'll mark this resolved.

Actions #8

Updated by Matt Gold about 5 years ago

  • Related to Bug #8463: Continued issues with portfolio view on mobile device added

Also available in: Atom PDF