Project

General

Profile

Actions

Support #9163

closed

Mobile responsiveness issues

Added by Marilyn Weber over 4 years ago. Updated over 4 years ago.

Status:
Resolved
Priority name:
Normal
Assignee:
Category name:
Layout
Target version:
Start date:
2018-02-04
Due date:
% Done:

0%

Estimated time:

Description

User Steve Soldwedel () writes "the website is not mobile friendly . . . While the header and footer of the site appear to have been coded for mobile, the body of the website is not, and so much of the sign up form was invisible to me until I put my phone in landscape mode. And, even then, the fields did not fit entirely on screen."

This was part of a help ticket where he needed his email account to be changed. That is now finished. He went on to say

"As for the mobile site, I worked as a web developer for ten years before quitting to become a school teacher. My specialty was responsive website design to optimize a single codebase to display on both desktop and mobile devices without any loss of functionality.

If you add some media queries to the css, it will solve the problem. Right now, you have a container with the id "content" whose width is set to 900px. There is currently no condition that allows that width to change.

A media query would allow this. For example:

@media only screen and (min-device-width:320px) and (max-device-width:480px) {

#content (max-width:480px;)

}

However, because your site wrapper looks to be set up to scale to different sizes, you could even delete the width:900px property from #content and that would significantly ease the problem. It, at least, makes all the form fields visible on a mobile device.

Ideally, the form would totally reorient itself so that none of the form fields floated next to each other and, instead, ran in a list.

If you wanted to give me access to the codebase, I could fix all this stuff in a matter of minutes."

I suspect you know all this already. How would you like me to reply?

Actions #1

Updated by Matt Gold over 4 years ago

  • Status changed from New to Assigned
  • Assignee set to Boone Gorges

Boone, Paige, and Chris -- what do you think?

Marilyn -- please thank him very much and tell him that we will be in touch soon.

Actions #2

Updated by Raymond Hoh over 4 years ago

  • Category name set to Layout
  • Status changed from Assigned to Staged for Production Release
  • Assignee changed from Boone Gorges to Raymond Hoh
  • Target version set to 1.12.8

I've made a number of tweaks to our theme to fix responsiveness in several areas:
https://github.com/cuny-academic-commons/cac/compare/97f58012f0...805c23be59

The registration page should now flow better for devices with smaller widths.

I've also tweaked the group forum layout and group forum post form so things are a little more visible for mobile devices.

These fixes will be available on February 13th.

Thank Steve for bringing this to our attention. If he finds any other bugs after the February 13th release, please tell him to let us know.

Actions #3

Updated by Raymond Hoh over 4 years ago

  • Subject changed from an offer of help for our mobile design to Mobile responsiveness issues
Actions #4

Updated by Boone Gorges over 4 years ago

Marilyn, please pass along our thanks to Steve for identifying these issues.

It's not currently possible for us to open up our codebase to outside contributions. The repository has a fair number of non-public assets (password files, etc) that can't easily be extracted. Aside from this, the number of dependencies that are required to run a local version of even just our WordPress theme is quite high, and there are few ways short of a full database dump to meet those dependencies.

As for the specific issues on the Register page: The WordPress theme that the Commons is based on was originally written the better part of ten years ago. We've taken some steps in the past to retrofit the critical parts of the site so that they work acceptably well on mobile devices - see for example https://redmine.gc.cuny.edu/issues/3112. But, due to limited resources, we haven't done the kind of complete audit that we probably could use.

In the not-too-distant future, we hope to start the process of designing and implementing a new theme for the Commons, which would be built with mobile-first principles in mind. Until then, we'll continue to make incremental fixes to what we've got, based on reports like yours. You can see above that Ray has already started implementing some fixes.

While we can't accept direct code contributions (in the form of, say, pull requests), we'd be very glad for Steve to report future issues directly to the Commons team via our Redmine installation: https://redmine.gc.cuny.edu/projects/cunyac. If he's interested, I'd be glad to create an account for him.

Actions #5

Updated by Boone Gorges over 4 years ago

  • Status changed from Staged for Production Release to Resolved
Actions

Also available in: Atom PDF