css rendering on iphone

We have a web page that includes a form. The customer wanted some of the elements to appear larger on a smart phone; I added some unconditional css classes to make these items larger.

My thinking is get it working EVERYWHERE, then use css media to only apply it to the smaller screen.

Please look at www.rainrich.com/indexrsp.php. The attached is how it appears on my PC in Firefox. Note the line that starts with "Step 1" and includes the caption, the <select> element & the button. These were all styled in a larger font than the surrounding items.

Then look at it on an iPhone. The text , etc., on the "Step 1" line are now actually SMALLER on the iPhone.

The applicable css is:

.pt14gb {font-size: 14pt !important; font-family: Arial; font-weight: bold; color:#2DC000;}
      .pt12  {font-size: 12pt; font-family: Arial;}      
      .pt12i  {font-size: 12pt !important; font-family: Arial;}

Since it wasn't taking, I added the !important tag, same result.

Part of the applicable HTML follows:

<td width="30%" class="pt14gb">Step 1 - Select Town</td>
                              <td><select name="comm" class="pt12i">

How can I make the font larger so that it works on the iPhone (or other similar device)?

Thanks
Larger-Font.jpg
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.

Hamidreza VakilianSenior iOS/Android DeveloperCommented:
You should use css media queries. Customize and define your styles for each device / screen size in its corresponding media query block, check this link:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

More info:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
OK, I knew about that. So I did this:

@media screen and (max-width: 480px) {
      .sellist {font-size: 14pt; font-family: Arial;}
      .grbold12 {font-size: 16pt; font-family: Arial; font-weight: bold; color:#2DC000;}
}      

In the "regular" CSS (preceeding the @media) , sellist & grbold12 are set like this:

      .grbold12 {font-size: 12pt; font-family: Arial; font-weight: bold; color:#2DC000;}
      .sellist {font-size: 10pt; font-family: Arial;}

The display on the iPhone is SMALLER than on my PC screen.

Makes no sense. Should be a LOT bigger.

What am I doing wrong?
RobOwner (Aidellio)Commented:
Have you set the viewport?

These three meta tags must appear in the <head> section of your site.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Before you go any further you should look at bootstrap for what you're doing. http://getbootstrap.com/getting-started/
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RobOwner (Aidellio)Commented:
http://www.rainrich.com/indexrsp.php also gives me a 404 error
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Rob Jurd,

Sorry I gave you the wrong link. The right link is http://rainrich.com/scheduling/indexrsp.php

I put in the viewport stuff. Now it is TOTALLY not responsive. That made it MUCH worse.

If you have an iPhone or equivalent, look at it now. Before it resized it properly. Now that is gone.

Thanks
RobOwner (Aidellio)Commented:
The issue is because you're using a table in your layout.  this is fixed to 960 pixels wide as is the image it contains.  set these to 100% and it will become "responsive".  Again I need to reiterate that you should adopt bootstrap for laying out your site in a responsive way

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
RobOwner (Aidellio)Commented:
Capture.JPG
RobOwner (Aidellio)Commented:
I also thought you were going to have two different menus?  one for mobile and one for desktop about 906px?

Personally I think you should have the one menu for both and drop the image completely
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Rob Jurd,

How did you get that screen shot?

Mine looks NOTHING like that on my iPhone.  That would be great if I worked like that.

PS, I changed the table width 960 to 100%. I left that viewport thing in, still totally screwed up. Took viewport out, it's back to the original, text still too small on Step 1.

I'd like to see your code for the screenshot.

As an aside, how can I do a screenshot on an iPhone?

Thanks
RobOwner (Aidellio)Commented:
As an aside, how can I do a screenshot on an iPhone?
press and hold the "home" button at the bottom and "tap" the sleep/wake/on/off button at the top of the phone

PLEASE do yourself a favour and implement bootstrap.  It's as easy as including it at the top of your page like you wwould any other script or style.  Then you just add classes to your existing code to make it responsive (and a little other work too but we'll get to that later).  It will be faster and more robust to do it this way.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Rob Jurd,

Attached is a screenshot on my iPhone (the png file). This is after I put EVERYTHING back like it was at the beginning, except with outer table width is now 100%..

Also attached is the source of the entire page.

When I view the page on my Win 7 PC in FireFox, it looks like the attached win7ff.jpg.

I find it plainly impossible that the iPhone displays step 1 in a smaller font size because the EXACT same class (for font) is used on Step 1 & step 2, as shown on win7ff.jpg.

So I guess I just have to build a much simpler page, step by step for the iPhone. What a pain.

Can someone else chime in on making this work?

It just makes no sense at all, but there HAS to be a trick.
IMG-0547.PNG
win7ff.jpg
indexrsp1.php
RobOwner (Aidellio)Commented:
So I guess I just have to build a much simpler page, step by step for the iPhone. What a pain.
Not at all.  To build a responsive site you need the right tools.  I use bootstrap because it takes care of all this hassle.  Believe me, I understand your frustration and went through it myself until someone showed me how good bootstrap is.

The trick is to not use tables and fixed width images.

I've adapted your site to describe what I was talking about.  view this on your iphone AND your laptop/computer:
http://output.jsbin.com/qubezi

Even on your laptop/computer, resize the browser window and you'll see it change.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Yeah, I see how that works, it kind of screws up the menu & drops the header image if the screen size is small.

I don't see them (customer) going for it.

I seem to have detected the issue with the font sizes; I was using points (pt) as the unit, I tried px and it works well on the iphone. My guess is Safari does not recognize "pt" as a size unit.

I have signed up for taking a bootstrap class at Lynda.com; I haven't started it yet, my reluctance is I'm in a hurry & I don't want to build the page over again from scratch, but you are implying that I won't have to.

I'll take a look at Bootstrap.
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To Rob Jurd,

Which of the download options do I use here?

http://getbootstrap.com/getting-started/

Or is this the wrong place?

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

I did a little mockup that I was already building to try to get around the problems.

I converted it to bootstrap.

Please look at http://rainrich.com/scheduling/resp_test1.htm. This is just the top part of the page, not in bootstrap. Looks good on my iPhone, font size big enough.

Then I converted to bootstrap. I looked at it on the iphone, all screwed up, NOT responsive.

So I took out   <meta name="viewport" content="width=device-width, initial-scale=1">. From my experience so far, that just totally screws things up. That made it better, but still not responsive.

Please look at http://rainrich.com/scheduling/resp_test2.htm.

It seems better without Bootstrap. Looks like I will have to have two separate pages, I CANNOT get the font to be optionally bigger because @media doesn't work. See also my question http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28679134.html about this.

This project is one of those (I have had many like this) that fights it EVERY STEP of the way.

I like the way bootstrap capabilities & classes looked, it just doesn't make things responsive.

Thanks
RobOwner (Aidellio)Commented:
You won't need two pages. As I said in the other thread, stop blaming the tools. We'll get there and you'll know how to use bootstrap and media queries by the end of it.
Give me some time to look at your mockups and make the necessary adjustments
Rob JurdEE AdvisorCommented:
I've requested that this question be deleted for the following reason:

This is now a duplicate of http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28679134.html
This will be deleted in 4 days to allow for comments to continue in the new question.
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.