HTML / possibly CSS help - Page 1
Forum section: electronics / general

author: Mjolinor
author_rank: Frequent Contributor
timestamp: April 04, 2020, 12:30:36 pm
content: 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:QuoteI 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.

author: sleemanj
author_rank: Super Contributor
timestamp: April 04, 2020, 12:48:58 pm
content: Code:<style type="text/css">input { font-size: 20px; }</style>In the html anywhere is fine

author: Mjolinor
author_rank: Frequent Contributor
timestamp: April 04, 2020, 12:58:17 pm
content: Quote from: sleemanj on April 04, 2020, 12:48:58 pmPerfect. I should have asked two days ago.

author: T3sl4co1l
author_rank: Super Contributor
timestamp: April 04, 2020, 10:08:26 pm
content: Code:You may want to put a<meta name=viewport content="width=device-width, initial-scale=1">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

author: Nominal Animal
author_rank: Super Contributor
timestamp: April 04, 2020, 10:38:12 pm
content: 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 athttps://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.

author: Mjolinor
author_rank: Frequent Contributor
timestamp: April 06, 2020, 08:51:39 am
content: Quote from: Nominal Animal on April 04, 2020, 10:38:12 pmI cannot format it like that. What I pasted was from the page source in the browser. On the device the web page definition is like this:QuoteIt is assembled with this:QuoteAnd boy did that lot bake my noodle.Edit: Hmm, it seems that the forum took all the < br > and plus signs out, never mind, I am sure you get the gist of it. I am also very very limited for space on the ESP12 so if it works, it will do.I think it is only a middle step anyway,once I pluck up the courage I will fire up Android Studio and make an app for it. (groan)

author: Nominal Animal
author_rank: Super Contributor
timestamp: April 06, 2020, 12:51:25 pm
content: Quote from: Mjolinor on April 06, 2020, 08:51:39 amAh, right. Sorry, I forgot this was on the ESP8266.