Up to Main Index Up to Journal for March, 2016 JOURNAL FOR TUESDAY 15TH MARCH, 2016 ______________________________________________________________________________ SUBJECT: A cry for help... DATE: Tue 15 Mar 19:41:16 GMT 2016 People have been asking for me to make a few tweaks to the site. In fact they have been asking for a long time. I've tried twice to make changes. Each time it required either JavaScript, JQuery or worked beautifully only to fall apart in browser X or on device Y. I've had another go - with just the layout and mobile changes. No JavaScript or other funky stuff, just a tiny bit of CSS. I've tested on what I can: - Chrome (v49.0.2623.87 64bit) on Linux - Chrome (v49.0.2623.91 32bit) on Android (Lollipop), MOTO E, 2nd Gen - Chrome (v49.0.2623.91 32bit) on Android (Marshmallow), Nexus 7, 2013 - Safari (v9537.53) on iOS 7.1.2, iPhone 4 - Chrome (v49.0.2623.87 m) on Windows 10 - IE8 on Windows 7 - IE9 on Windows 7 - IE11 on Windows 10 - Edge on Windows 10 - Firefox (v45.0) on Windows 10 Now for my cry for help :) If you have something not listed above please goto: Layout test page: test.html Glaring omissions from my current list of testing include iPads and newer iPhones. The page should look like the home page. On the desktop it should now be centered. On mobile it may be centered depending on screen size or device orientation. For small screens it should be the width of the device - and may need zooming - but the left/right edges should not be cut off by default. For small smartphone screens it seems to work particularly well in landscape mode. If you get anything weird when visiting the above page please can you email me: diddymus@wolfmud.org and let me know. Screenshots of weirdness are greatly appreciated along with the browser and it's version. Device details are also useful, but only if you feel comfortable handing them out :) If it works for you great! You can still email me to let me know so I can add to the list of tested browsers and devices. For those of you who don't know: Centering a block of plain text, using a monospace font all while while preserving whitespace and line breaks - using <pre/> tags - is a pain. Especially when the ch CSS unit is broken or unsupported - otherwise it would be easy. Also, when on mobile, the page should fit the width of the device, centering if it's a big tablet or long phone in landscape mode. Trying to force a font to a specific size, using CSS calc or JavaScript to work out exact sizes of pages and/or divs etc. - messy as hell. My (current) final solution adds the following meta tag: <meta name="viewport" content="width=device-width"> As well as a little CSS: body { text-align: center; } pre { display: inline-block; text-align: left; } In the end it's short, sweet and simple :) If all goes well I'll roll out the changes to the whole site soon. In the meantime, while waiting for responses, I'll get back to loading zones from files in WolfMUD. -- Diddymus Up to Main Index Up to Journal for March, 2016