CUNY Academic Commons

User Steve Soldwedel (Steven.Soldwedel@lc.cuny.edu) 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?