Some widgets in the right menu in the suffer a severe crushing

[Fraenkiman]

Hello, everyone,

some widgets in the right menu of Leggero-v2 style suffer severe crushing when the screen or browser width is larger than 719px and smaller than 1024px. Since mobile devices have become more and more important, it is worth taking a closer look at the accident.

Reproducibility:

For example, place the LastComments, Calendar, Searchbox widgets in the right menu bar. Take the smartphone (e.g. iPhone 13 mini) or tablet in landscape format and look at the widgets in the right menu bar. Alternatively, the developer tool (F12) can also be opened in Google Chrome if the browser cache is emptied. Now you can slowly drag the left side of the developer tool to the left with the mouse, read the width at the top and look at the preview.

From my point of view there are three possible solutions:

1. RESPONSIVE DESIGN applies to all screens with a width of less than 1024px. I don't think this solution is that great. 2. All affected widgets must be adjusted so that they also have enough space if the width is less than 1024px and the right menu bar is smaller. However, this complicates the development of new plugins/widgets. 3. Additional media queries are placed in the style sheet.

In my opinion, the third possible solution is the most attractive. On a smartphone (e.g. an iPhone 13mini), the style without squeezing the right menu bar is displayed in landscape format. A video or picture is usually viewed in landscape format. A banner in the head can be optically accommodated better without cutting parts of the banner with smaller widths. With larger screen resolutions, e.g. UHD and 4k, you can optionally accommodate large widths of the style.

In the proposed example, the body container only reached a maximum width of 1053px if the screen or browser width was 1080px - previously 1000px if 1024px. With smaller widths of the browser, the body container and div#main are reduced. The right menu retains a fixed width for all resolutions except in RESPONSIVE DESIGN. To do this, you add the two files common.css and column.css with the media queries and the respective settings.

For testing, I took the files from the current master branch (08/21/22) and adapted them. So you can copy and try them out on a test system.

For a before and after test I used the following devices: Raspberry 7 inch display (chromium) iPhone 11 (Safari + Chrome + Firefox) iPhone 13 mini (Safari) iPhone XS Max (Safari) Huawei P30 Pro (Chrome) Nexus 9 (Firefox) Lenovo Yoga Tab 3 (Chrome) Samsung Galaxy S9 (Chrome + Firefox) HUAWEI MediaPad M3 Lite 10 (Chrome)

Best regards Frank

[Fraenkiman]

media-queries.zip

[Fraenkiman]

Closed with #259