Max width

19 September 2025

Parody

Somebody has created a parody account about me on Twitter, beg your pardon, X. At first, I could rather appreciate it, and I responded to it myself, trying to create some amusing dialogues, on a platform where bitterness and hate seems to be the norm. But recently humour is increasingly lacking in what the parodist posts, and what is left largely consists of unfunny attempts to discredit me and my website by factually untrue allegations.

Be that as it may, there were also some scrutinies that revealed actual flaws in my HTML and CSS code. I take advantage of those, and try to find solutions.

Horizontal scrolling

For example, it was found that my holiday page about the French city of Arbois and its beautiful surroundings, does scale well on a smartphone held in landscape position, but not in portrait, which is more common.

The cause was that my <img tags had a fixed parameter width=600, which is more than the number of logical pixels that most smartphone have to offer as its smallest screen dimension. As a result, while text was correctly scaled to fit the width of the screen, by wrapping to the narrower lines, photos remained too wide, and could only be fully seen by scrolling horizontally. Horizontal scrolling isn’t user friendly and obviously should be avoid as much as possible.

Solving it, simply

I found an easy, effective and site-wide solution: in textfont.css, in the existing CSS code for img, I added: max-width: 100%;
That alone in fact already solves the problem: images now have a width of 100% of the containing HTML element (which is <body>, or maybe a <div> that inherited the setting, I don’t know exactly how it works; but it does), so the pictures are scaled along with the text, even when narrower than 600px, without requiring horizontal scrolling.

Of course specifying a fixed width for each photo is now superfluous (and was ugly and inflexible in the first place), so I’ll remove those everywhere. This affects the following URLs:

about/personal.htm
accessng.htm
lingtics/intrlnga/gramiaan/Jeszenszky/jesz.htm
lingtics/intrlnga/scrptura/ina-Java.htm
musica/bajader/ovrturia.htm
musica/hind/Hind-en.htm
musica/hind/Hind-nl.htm
musica/lugvazio/ia.htm
nature/salcauda/ia.htm
politics/election/formeitj.htm
politics/wilders/onzwaaia.htm
politics/wilders/onzwaanl.htm
toerisme/arbois/ia.htm
toerisme/drgruinl.htm

Click to enlarge

There is still a problem, though: in case anyone might want to zoom into a picture to see more details, the navigation button appears, also zoomed, so far too large, which is annoying. Solution: I will make such pictures clickable (where it makes sense), so the photo appears full-width in a dedicated tab, where it can be zoomed to anyone’s heart’s content, without seeing the annoying navigation button.

I used this technique already in several other pages, where the pictures appear as thumbnails in the running text, and only become fully visible when clicked (or tapped, on a smartphone or tablet, of course). In that case the fixed width specification must remain, obviously, because it indicates how small the thumbnail should be, without changing the running text’s line height too much.

This concerns the following URLs, where no changes in the HTML are necessary:

economi/godwinen.htm
economi/godwinnl.htm
fotoport/fotoport.htm
lingtics/intrlnga/SdLU/librvagr.htm
musica/1810/precoce/precoce.htm
musica/3rdstrqt/notas.htm
musica/aramkhch/en02.htm
musica/aramkhch/en.htm
musica/aramkhch/ia02.htm
musica/aramkhch/ia.htm
musica/carminho/ia01.htm
musica/encontre/ia01.htm
musica/Nicodim/ia.htm
musica/papenetc/ia.htm
recensie/2081124.htm
sfreview/backbutn/en.htm
sfreview/LubWpaEnt/en.htm
sfreview/rtolmark/en.htm
technica/irpaneel.htm
technica/opwndrad/wndra2nl.htm
technica/opwndrad/wndra3nl.htm
technica/USB-micr/en.htm
technica/USB-micr/nl.htm
toerisme/alcercth/en.htm
toerisme/drgruinl.htm

Done

19 September 2025, 16:45B