I want to swear loudly and viciously.

This worked just fine on an iPhone.

Then, I added some CSS that:

1) constrained the width of the containers so they didn't go waaaay wider than what their content allowed (and still looked balanced) and

2) CSS so the h2 tags didn't resize when dragging the window smaller (fixing inconsistent header sizes)

3) another snippet to keep the background of that blue strip from even showing on mobile devices. (it would off-set itself from the image on top)

Now… my client says, "too big to read on the iPhone… but it's there"

I'm stumped and mentally drained. Help appreciated

Ok, check this out.  I think I'm onto something…

Here's CSS that told the big blue banner (technically behind the "Itinerary Download" call to action) to go away on iphone/small window sizes:

/* hides the strip behind lead mag on iphones */
@media only screen and (max-width: 1000px) {
	 .hidden-bg-mobile {
	    background-image: none!important;
	    }
    }

But here's the CSS that keeps the columns from stretching so wiiiiide!

/* Keeps the full size colmns from stretching so wide */
.constrained-width {
   width: 890px!important;
   margin: 0 auto!important;
}

Is there a conflict you can see? 

OR see the CSS that triggers actions with mobile only? Well, whatever is telling the page NOT to be responsive -- which I'm thinking is something to do with the .constrained-width parameter) -- is there a way to tell it to be ignored with mobile?

I commented that section out for now, and really, just trying to do a creative work-around entirely (I changed the graphic so I would't need to hide anything behind the foreground graphic)

I just wanted my cake and to eat it too… 

To 1) constrain the width some on the columns.  When users pull their window wide (or just use a much wider screen), the balance gets too spaced.

2) to still render on mobile too.

So we know the .constrained-width code will kill the mobile render… is there another solution?