Fix NewMuniMetro.com

fix-newmunimetro.md

Update: it worked! https://twitter.com/Nextransit/status/552355123570434048

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.