css @media doesn't work

Please look at http://rainrich.com/scheduling/resp_test1.htm on a normal computer screen.

Then please look at it on a iPhone.

See attached html / css. I am trying to use @media to increase the font size on a small screen.

Doesn't work.

What's wrong?

Thanks.
resp-test1.htm
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GauthierCommented:
you are missing that:
<meta name="viewport" content="width=device-width, initial-scale=1">
without that, the iphone will assume it has a screen larger than reality.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Gauther,

I've already tried that, that COMPLETELY messes up the iPhone, TOTALLY unresponsive.

I guess I just have to have 2 versions & decide what to display based on the device.

Thanks
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Gauther,

More specifically, look at http://rainrich.com/scheduling/resp_test2.htm

Look at it on an iphone (or similar), all screwed up.

Thanks
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Ray PaseurCommented:
Take a little time to learn about Bootstrap and FontAwesome.  You can thank me later :-)
http://getbootstrap.com/
http://fortawesome.github.io/Font-Awesome/
GauthierCommented:
Of course, you can't have a page halfway responsive, your header need to be responsive too.
and an image map is not the way to go.
To help you,  you probably need to use a responsive framework like bootstrap or foundation.
RobOwner (Aidellio)Commented:
Richard,
With all respect, you need to stop blaming the tools. It's like you're using a hammer to glue something underwater at the moment.
All mobile responsive sites have the viewport tag  for the reasons mentioned already.
Media queries do work when implemented correctly.
The issue here is the use of images that do not scale well. The menu images should have no text (other than for logos). The text is overlaid when the page loads.
The other issue is using tables with fixed with. They should all be percentages. However for your layout I do not see any reason to use a table but rather incorporate bootstrap with div tags.
I'm more than happy to help you through this but to get your site responsive on ALL devices and browsers you will need to incorporate libraries such as bootstrap as they built to cover all bases.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Gauthier, Rob Jurd:

So I think you are saying the issue is the image map?

So I have to do the menu a different way?

FYI, the page resp_test1.htm has no tables & was done using bootstrap (as far as I could figure it out).

I'd appreciate your comments on that one, disregarding the image map. Do I have bootstrap right or is it screwed up?
RobOwner (Aidellio)Commented:
For a menu, an image map just won't work (responsive anyway) so yes you'll need to do the menu another way. Typically this is done with ul and li elements and the whole menu collapses to just an icon at low width resolutions (e.g. mobile devices).

Just like this http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_case_navbar7&stacked=h

View that page on page your phone and computer. Same page, same code though the layout changes (all done with media queries)
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Rob Jurd,

That's very useful. I was thinking of trying to make it as much like the current menu as possible. I was thinking:

(1) Make the existing menu items into 7 images, like the attached. Just display them across the top each with a link. I realize there is no mouseover, etc. No image size specified. See attached menu1.jpg

(2) Take the attached image top_images & put it underneath the menu.

Do the rest like I have it.

The reason I think this is better is the customer will want this look & feel at the top.

In all cases, specify no width / height for the image (I'm thinking Bootstrap will size accordingly depending upon the device.

Will that work?

Thanks,
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Rob Jurd,

I forgot the attachments.
menu1.jpg
top-images.jpg
Ray PaseurCommented:
How does it look on the iPhone?  You want to answer that question before you even consider how it looks on a tablet, laptop or desktop.  Because that's where web access is going these days and if your site is not responsive it will be automatically penalized by Google.  So think Mobile-First in all design and forget about the desktop until after your mobile design is perfected.
RobOwner (Aidellio)Commented:
Please also take on-board that it's not just me saying mobile first - Ray has jumped in here to reiterate how important that is.

(1) Make the existing menu items into 7 images, like the attached. Just display them across the top each with a link. I realize there is no mouseover, etc. No image size specified. See attached menu1.jpg
You could do that but it doesn't scale well on small devices. It just will not be responsive the way you want it to.  Sure I understand about the customer wanting the look, however I believe you can get this with CSS (vector based), rather than a raster image.  I'll show you what I mean.

(2) Take the attached image top_images & put it underneath the menu.
That's a start.  I believe we can replicate the look you want, retaining most of the design you have so far.
RobOwner (Aidellio)Commented:
Here is how you can use CSS to create your top menu:  http://jsbin.com/honiza/1/edit?html,output

Resize your browser window and see how it changes layout at 768px

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Rob Jurd,

OK, I saw what you did but I want to try for a horizontal menu.

Please look at http://rainrich.com/scheduling/bs_page.htm. The source html / css is attached. In firefox on my PC, it looks like I want it to.

On the iphone, the menu is in a column (not spread across horizontally at the top) & the image does not show up at all.

I used class="img-responsive" for the image, thinking that would make it work, but it doesn't even show.

What's wrong?
bs-page.htm
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I'm closing this on, will start another.

Thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.