Hey fellow transit hackers,
I'm Nick Doiron (@mapmeld), a 2012 Code for America fellow and one of the devs behind Chicago's transit future map at http://vision.transitfuture.org/
Like you, we had a lot of cool visualization stuff which didn't work on mobile. There are also a few places on your site where the text is wider than the viewport, or scrolling laterally jumbles things up. Fortunately, it looks like there are a few lines of HTML and CSS which will get this thing fixed. If only designing transit networks were so easy!
HTML: replace your current viewport tag. Make this thing a fixed-width single column site.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
CSS on homepage:
/* can't have input overflowing all of the content */
input.getemail {
max-width: 85%;
}
/* gap between section button and very end of the page */
.sectionbutton {
margin-bottom: 20px;
}
Add to the end of phone.css:
/* common style for full-width sections */
#bgphoto, #photo_overlay, .leftContent, .rows, #percapita, #population, #mmarket_line, .graphimg, .faqdetail, .faqanswer {
min-width: 0 !important;
width: 100% !important;
margin: 0;
}
/* style for most text */
p {
max-width: 90% !important;
}
/* images and other elements should be block */
#percapita, .graphimg {
display: block;
}
img {
float: none !important;
padding-right: 0 !important;
height: auto;
}
img.rightFloat {
display: block !important;
}
/* overwrite some content CSS */
div.content {
width: 100% !important;
padding: 0 !important;
margin: 10px 0 80px 0;
}
.content p, h2 {
padding: 0 10px;
}
/* more vertical space when headlines are long */
.content h1 {
line-height: 55px;
}
.boldContent h3 {
line-height: 45px;
}
#photo_overlay_content h1, .boldContent h1 {
font-size: 35px !important;
}
/* center the M circle */
.m_circle {
width: 100%;
text-align: center;
padding: 0;
}
.m_circle img {
margin: 0 auto;
}
.m_circle_text {
width: 100%;
}
.boldContent, .greenContent, #mmarket_line {
display: block;
}
.leftContent, .boldContent {
text-align: center;
}
.leftContent p, .boldContent p {
text-align: left;
}
.leftContent img, .boldContent img {
margin: auto;
max-width: 90%;
}
/* don't show these */
#vsep, #backro, #nextro {
display: none;
}
/* no longer a fixed height */
.fullcontent {
height: auto !important;
}
/* show all text in this section, all of the time */
div#text1, div#text2 {
opacity: 1;
margin: 10px;
}
/* block not absolute */
div#photo_overlay.bottom {
position: relative !important;
margin: 0 !important;
bottom: auto !important;
top: auto !important;
left: auto !important;
}
/* block for mapstep and images */
.mapstep {
display: block;
position: relative;
max-width: 100%;
margin: 0;
right: auto;
top: auto;
height: auto;
min-height: 200px;
}
.mapstep img, #step2content img {
display: block;
margin: 0 !important;
max-width: 100%;
height: auto;
}
/* the FAQ section needs to be smaller and not fixed size */
.faqsummary {
line-height: 22pt;
}
.faqanswer {
padding: 0;
}
.faqanswer p {
margin-left: 0;
font-size: 14pt;
}
.faqanswer img {
max-width: 100% !important;
}
Bonus: if you play around with http://GeoJSON.io we can probably make interactive maps of these routes.