Products > Programming

HTML / possibly CSS help

(1/2) > >>

Mjolinor:

I have a very simple web page running on an ESP8266 to control the power feed on my milling machine.

It all works fine and when I use my desktop to control it I can see it no problem.

The problem is that when I look at it in Chrome on an Android phone though I can make the text legible without zooming all the buttons and text entry boxes are stupid little. I can zoom the page OK on the phone and see them but once I enter the zoom goes back to 100%.

This is the page:
--- Quote ---<font size='18'> DRO <form action = 'msg5'><input type='text' name='msg5' size=8 value='30.00000' size=10 autostepdir> Distance  <action = 'Submit'>

<input type='submit' name = 'LR' value='<'>  <action = 'Submit'><input type='submit' name = 'LR' value='>'><font size='18'>


 <form action = 'msg6'><input type='text' name='msg6' size=8 value='2500.00000' size=10 autostepdir> Speed  <action = 'Submit'>

<input type='submit' name = 'LRS' value='<'>  <action = 'Submit'><input type='submit' name = 'LRS' value='>'>   </font>

--- End quote ---

I added a few new lines to make it readable.

This is what it looks like:

I just need to make the text boxes bigger either by making them bigger or fixing a zoom value to the whole page. T'interweb reckons I should use CSS but having never even heard of it I am finding it difficult to know where one sticks these CSS instructions. Do they just go anywhere in the HTML or do they need to be in a separate file somewhere. I have no idea how to add a separate file to an ESP 8266 web server, as far as I know you can only have one.

sleemanj:

--- Code: ---<style type="text/css">
input { font-size: 20px; }
</style>

--- End code ---

In the html anywhere is fine

Mjolinor:

--- Quote from: sleemanj on April 04, 2020, 12:48:58 pm ---
--- Code: ---<style type="text/css">
input { font-size: 20px; }
</style>

--- End code ---

In the html anywhere is fine

--- End quote ---


Perfect. I should have asked two days ago. :)

T3sl4co1l:

--- Code: ---You may want to put a

--- End code ---
    <meta name=viewport content="width=device-width, initial-scale=1">
[/code]
in the <head>.  This tells mobile devices not to scale the page -- if it's missing, the browser assumes it's a naive desktop-formatted page and tries to format it at typical desktop width and scale.

Hm, I forget if text height specified by exact measurement (pixels) overrides this or not.  Probably not in Chrome (and most modern browsers), because it zooms the whole page, not just changes text and image size..?

Tim

Nominal Animal:
I recommend the following "structure" for web pages:

  <!DOCTYPE html5>
  <html>
   <head>
    <title> Page Title </title>
    Meta elements
    <style type="text/css">
     CSS definitions
    </style>
    <script type="text/javascript">
     JavaScript
    </script>
   </head>
   <body>
    Body Content
   </body>
  </html>

The indentation is there for illustration; you can either keep it or remove the indentation.

Meta elements you might choose to use includes <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> or <meta charset="UTF-8"> (which tells the browser the document uses UTF-8; otherwise, if you save the page as a local file, browsers assume it uses some "legacy encoding", like Windows-1252 or ISO 8859-1), and the <meta name="viewport" content="width=device-width, initial-scale=1"> T3sl4co1l suggested.

If you don't have any CSS, omit the <style type="text/css"></style>.

If you don't need any JavaScript, omit the <script type="text/javascript"></script>.

Finally, you might wish to use the W3 validator facilities at https://validator.w3.org/ to see what it says about your HTML code.  I disagree with some of its warnings (especially "... is not needed and should be omitted" and "Consider adding ..." ones), but it is definitely a nice sanity check.

Navigation

[0] Message Index

[#] Next page

There was an error while thanking
Thanking...
Go to full version
Powered by SMFPacks Advanced Attachments Uploader Mod