Hi Folks. The "Custom HTML" and "HTML Doc" plugins are not displaying the content properly for me. What do you guys set the font size to in order to display it properly on the iPhone/iPad screen? The fonts look too small on my iDevices :-) I'm entering the info in the control panel for Custom HTML, and supplying a remote HTML file for HTML Doc. Thanks Steve

Add this to the top header of the custom html and html doc source <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style>

That should definitely help. If you want to vary font sizes between iPad and iPhone, there is a way of detecting the screen size and using conditional css to help as well. http://perishablepress.com/target-iphone-and-ipad-with-css3-media-queries/

@mysps. Thanks, that code definitely helped, but still a bit smaller than I'd like. I tried doubling the font size to 22pt, but font size remained the same...any way to double the size? Thanks!

@AlanMac. Thanks for the link...any snippet of code that you personally use? Cheers

Hi @BuzzingSteve, I am not on my app dev box at the mo, but if you get stuck, let me know and I'll dig something out tomorrow. You should see font size increasing, that is odd. My personal preference for managing font size is to use <h> tags in my html; I control the sizes for each tag using css. Its bad practice to write everything inside <h> tags for web sites I am told, but works a treat. Alan

@AlanMac. Yep, odd...did a save and refresh but still saw same size...let me know if you find that snippet of code :-) Thanks

OK, so I thought I'd post this HTML snippet here..including the code I'm trying to get sized bigger on iOS...am I putting the above code in the wrong spot, or should the font size be removed from the predefined HTML for the search box? Entering a bigger size font in the above code has no effect...basically I want everything to be bigger, especially on the smaller screen :-) Cheers ---- <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} <form action="http://www.simplyhired.ca/a/jobs/search" name="search" style="width:auto;margin:0;padding:0;border:0;"> <input name="ds" type="hidden" value="sr" /> <input name="gr" type="hidden" value="jstg" /> <table cellpadding="0" cellspacing="0" style="width:auto;margin:0;padding:0;border:0;"> <tbody> <tr> <td align="left" style="width:auto;margin:0;padding:5px;border:0;font:10px arial;" valign="bottom"> <span style="font:bold 12px arial;">keywords</span><br /> <input name="q" onclick="this.value='';" style="width:102px;margin:0;padding:1px 2px;border:1px solid #999;font:12px arial;" type="text" value="" /><br /> job title or skills</td> </tr> <tr> <td align="left" style="width:auto;margin:0;padding:5px;border:0;font:10px arial;" valign="bottom"> <span style="font:bold 12px arial;">location</span><br /> <input name="l" onclick="this.value='';" style="width:102px;margin:0;padding:1px 2px;border:1px solid #999;font:12px arial;" type="text" value="" /><br /> city, state or zip</td> </tr> <tr> <td align="left" style="width:auto;margin:0;padding:5px;border:0;color:#000;font:11px arial;" valign="top"> <input name="submit" style="margin:0;padding:0 2px;font:12px arial;" type="submit" value="Search Jobs" /><br /> <a href="http://www.simplyhired.ca/" style="color:#000;font:11px arial;text-decoration:none;">Jobs</a> by <a href="http://www.simplyhired.ca/" style="text-decoration:none;"><span style="color:#00ADEF;font:bold 11px arial;">Simply</span><span style="color:#A6CE39;font:bold 11px arial;">Hired</span></a></td> </tr> </tbody> </table> </form>

I think the problem with the html you posted is that there is alot of styling statements that may be over-riding anything you want to edit. I am no html guru, I simply stripped everything that I thought was unnecessary. I fell short of adding inline css, but the font sizes on this will change and the width of the form will adjust to a percentage of the display. The next post will have the revised html.

<html> <head> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport"> <style type="text/css"></style> <title>test2</title> </head> <body> <br> <form action="http://www.simplyhired.ca/a/jobs/search" name="search" style="border: 0pt none ; margin: 0pt; padding: 0pt; width: auto;"> <input name="ds" value="sr" type="hidden"> <input name="gr" value="jstg" type="hidden"> <table style="border: 0pt none ; margin: 0pt; padding: 0pt; width: 100%; height: 222px;" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="border: 0pt none ; margin: 0pt; padding: 5px; width: 100%; font-family: arial; font-size: 16px;" align="left" valign="bottom"> <span style="font-family: arial; font-style: normal; font-variant: normal; font-weight: bold; font-size: 18px; color: rgb(0, 0, 153);">keywords</span><br> <input name="q" onclick="this.value='';" style="border: 1px solid rgb(153, 153, 153); margin: 0pt; padding: 1px 2px; width: 100%; font-family: arial; font-size: 18px;" value="" type="text"><br> <span style="color: rgb(0, 0, 153);">job title or skills</span></td> </tr> <tr> <td style="border: 0pt none ; margin: 0pt; padding: 5px; width: auto; font-family: arial; font-size: 16px;" align="left" valign="bottom"> <span style="font-family: arial; font-style: normal; font-weight: bold; font-size: 18px; color: rgb(0, 0, 153);">location</span><br> <input name="l" onclick="this.value='';" style="border: 1px solid rgb(153, 153, 153); margin: 0pt; padding: 1px 2px; width: 100%; font-family: arial; font-size: 18px;" value="" type="text"><br> <span style="color: rgb(0, 0, 153);">city, state or zip</span></td> </tr> <tr> <td style="border: 0pt none ; margin: 0pt; padding: 5px; width: auto; color: rgb(0, 0, 0); font-family: arial; font-size: 16px;" align="left" valign="top"> <input name="submit" style="margin: 0pt; padding: 0pt 2px; font-family: arial; font-size: 18px;" value="Search Jobs" type="submit"><br> <a href="http://www.simplyhired.ca/" style="color: rgb(0, 0, 0); font-family: arial;">Jobs</a> by <a href="http://www.simplyhired.ca/" style="text-decoration: none;"><span style="color: rgb(0, 173, 239); font-family: arial; font-weight: bold; font-size: 16px;">Simply</span><span style="color: rgb(166, 206, 57); font-family: arial; font-weight: bold; font-size: 16px;">Hired</span></a></td> </tr> </tbody> </table> </form> </body> </html>

@AlanMac....this worked like a charm on both iPhone & iPad. You can consider yourself an HTML Guru :-) Thanks!

Cheers