How do I make something look good on both a full HD screen, as well as on a smartphone, in casu <https://prino.neocities.org/www/a-und-a/anhalterwesen-und-anhaltergefahren.html>,
where some of the tables are substantially wider than the containing text?

Robert
--
Robert AH Prins
robert(a)prino(d)org
The hitchhiking grandfather - https://prino.neocities.org/
Some REXX code for use on z/OS - https://prino.neocities.org/zOS/zOS-Tools.html

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On Wed, 30 Jul 2025 04:08 -0400, Dale wrote:

On 7/28/2025 8:46 PM, Robert Prins wrote:

How do I make something look good on both a full HD screen, as well as
on a smartphone, in casu <https://prino.neocities.org/www/a-und-a/ anhalterwesen-und-anhaltergefahren.html>, where some of the tables are substantially wider than the containing text?

Have a look at my website.

https://www.dalekelly.org/

My CSS file gives different looks for different screen sizes.

https://www.dalekelly.org/mystyle.css

I learned this on W3Schools.

https://www.w3schools.com/css/default.asp

W3School's CSS pages aren't the same as when I learned it though.

I use both text and icon links.

https://www.dalekelly.org/

This does not address Robert's problem.
The tables are images, and some of them are too wide for a narrow screen. Solving this requires quite a bit of work.
An image editor is needed to rearrange the tables into a different form
that is suited to narrow screens.
Then the 'picture' element can be used to display either the original form
in large screens, or the narrow form in smartphones.

https://www.w3schools.com/html/html_images_picture.asp

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On Tue, 29 Jul 2025 00:46:14 +0000, Robert Prins <robert@prino.org> wrote
in <1068r7j$2b895$1@dont-email.me>:

How do I make something look good on both a full HD screen, as well as on a >smartphone, in casu ><https://prino.neocities.org/www/a-und-a/anhalterwesen-und-anhaltergefahren.html>,
where some of the tables are substantially wider than the containing text?

Robert

Change the text so that each section is single paragraph rather than a set
of one line paragraphs. Remove those extra new lines characters which
probably occurred when you scanned a printed original.

You can adjust details like max width based on viewport size with css.

You need to change your mind set for you are not printing on fixed width
paper but displaying on a variable width screen.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On Wed, 30 Jul 2025 06:25:13 -0400, Dr.Kral@nyc.rr.com wrote in <8lsj8kpgr04g07gv4506mqsdbc6duak722@4ax.com>:

On Tue, 29 Jul 2025 00:46:14 +0000, Robert Prins <robert@prino.org> wrote
in <1068r7j$2b895$1@dont-email.me>:

How do I make something look good on both a full HD screen, as well as on a >>smartphone, in casu >><https://prino.neocities.org/www/a-und-a/anhalterwesen-und-anhaltergefahren.html>,
where some of the tables are substantially wider than the containing text?

Robert

Change the text so that each section is single paragraph rather than a set
of one line paragraphs. Remove those extra new lines characters which >probably occurred when you scanned a printed original.

You can adjust details like max width based on viewport size with css.

You need to change your mind set for you are not printing on fixed width >paper but displaying on a variable width screen.

I goofed --- that not the issue --- ignor this.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On Wed, 30 Jul 2025 06:26:14 -0400, Y Lee Coyote
<See.signature.line@mail.com> wrote in <4psj8k576h3nje2s6u8ctspciforq9nhfa@4ax.com>:

On Tue, 29 Jul 2025 00:46:14 +0000, Robert Prins <robert@prino.org> wrote
in <1068r7j$2b895$1@dont-email.me>:

How do I make something look good on both a full HD screen, as well as on a >>smartphone, in casu >><https://prino.neocities.org/www/a-und-a/anhalterwesen-und-anhaltergefahren.html>,
where some of the tables are substantially wider than the containing text?

Robert

Change the text so that each section is single paragraph rather than a set
of one line paragraphs. Remove those extra new lines characters which >probably occurred when you scanned a printed original.

You can adjust details like max width based on viewport size with css.

You need to change your mind set for you are not printing on fixed width >paper but displaying on a variable width screen.

I goofed --- that not the issue --- ignore this.

Y.

Valid return address is <YLeeCoyote (at) juno.com>
(Posting address is for the spammers)

See my stories at: https://yleecoyote.asslr.org/
Status page at: https://yleecoyote.weebly.com/

P & E

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

In article <1068r7j$2b895$1@dont-email.me>, robert@prino.org says...

How do I make something look good on both a full HD screen, as well as on a >smartphone, in casu ><https://prino.neocities.org/www/a-und-a/anhalterwesen-und-anhaltergefahren.html>,
where some of the tables are substantially wider than the containing text?

Robert

Hard to answer that broad question without writing a book. Happily,
several people already have. This is the one I like best: https://www.amazon.co.uk/Responsive-Web-Design-HTML5-CSS-ebook-dp- B0B25BX7CW/dp/B0B25BX7CW


--
--
Phil, London

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)

On Wed, 30 Jul 2025 10:58 +0200, I wrote:

On Wed, 30 Jul 2025 04:08 -0400, Dale wrote:

On 7/28/2025 8:46 PM, Robert Prins wrote:

How do I make something look good on both a full HD screen, as well as
on a smartphone, in casu <https://prino.neocities.org/www/a-und-a/ anhalterwesen-und-anhaltergefahren.html>, where some of the tables are substantially wider than the containing text?

Have a look at my website.

https://www.dalekelly.org/

My CSS file gives different looks for different screen sizes.

https://www.dalekelly.org/mystyle.css

I learned this on W3Schools.

https://www.w3schools.com/css/default.asp

W3School's CSS pages aren't the same as when I learned it though.

I use both text and icon links.

https://www.dalekelly.org/

This does not address Robert's problem.
The tables are images, and some of them are too wide for a narrow screen. Solving this requires quite a bit of work.
An image editor is needed to rearrange the tables into a different form
that is suited to narrow screens.
Then the 'picture' element can be used to display either the original form
in large screens, or the narrow form in smartphones.

https://www.w3schools.com/html/html_images_picture.asp

Oops, I guess I made a mistake. On closer inspection, the tables are not images. Although they could be turned into images, and then this method
would work.
It would be more logical to use the CSS flex layout and/or grid layout
instead of the 'table' element to adapt the data to the screen.
That does not look easy though, and it's quite a puzzle.

--- SoupGate-Win32 v1.05
* Origin: fsxNet Usenet Gateway (21:1/5)