Some of the blocks are missing when opening PWS Dashboard on Safari (iOS) mobile


I have not checked how is on Android phone , but on Iphone some of the blocks on the top of the Dashboard are missing . What can be the problem ?

I think that’s how it’s meant to be, the less important small blocks are missed out.

None of the main blocks are missing, though.

2 Likes

One can test this behavior on a larger browser window.
Just make it smaller and smaller and you will see that the normal blocks remain visible and the small blocks disappear.

In a tall mode window with a one block width there is only one small block, the one for the warnings.

If the small blocks would remain visible, one had always to scroll on a phone in tall mode to see the first “most important block”

1 Like

I see two of five small blocks in two lines on my iPhone, where are the other three lines?

Did you read the rest of this topic?

Yes, I read it, but important Blocks are not shown and important are missing.
As example, weather warning with no infos are shown!
And a question, what is important and what not? :wink:
Why are the smal blocks not all shown, line by line?

Could you please add a link to your weather-website?
A link to the website / pages you are asking support for?
The familie-loyal.de link you are using now in your avatar has nothing to do with your question/problem.

Answering your questions is easier if one can add a screenshot explaining what you did not read or understand.

  1. Because a phone is very limited in height
  2. When the dashboard was developed, first users discussed different designs and this was considered the most efficient.
  3. You can always change the PHP / CSS code yourself. Some users has only 1 small block, for the warning. Others have all. Others have none.
    All blocks are always available in the html. But based on the width of the screen some are “hidden”
    Turning the phone to a wide mode will show two or more small blocks.

Adapting the PHP/CSS-code will allow the see more small blocks.

Succes,
Wim

You should set the importance yourself.
The first block is always the warning block

  1. either the official warning
  2. or else calculated warnings based on current weather-conditions f.i. road conditionas, appoaching lightning, firerisk, thunderstorms
  3. or else a 1 hour forecast if you selected a forecast provider which has one

The other small blocks are considered to be from most important to least important. You select yourself which are more or less important.

A phone in tall mode with 5 small blocks can often only show 1 normal block.
And you yourself decide which is the importance of all those blocks and the sequence they should be shown.

Hope this clarifies it,

Succes,
Wim

Thanks for quick answer!
Ok, and where I can configurate it, but so that all 5 are shown?

I’m using PWS only on a localhost!

Sadly, not much i can do.
And for your information, the “product-name” is pwsWD or PWS_Dashboard.
PWS is a totally different generic name.

It is not something like “adapting a setting on a screen”
You have to adept the PHP/CSS code yourself.


If you are proficient in modifying PHP / CSS

  1. You need to use a real code editor
    Do NOT use MS-word or or MS-notepad .
    Those document editors insert all kind of text-formatting characters in the script.
    Use products like BBEdit or notepad++
  2. Make a backup-copy of your current ./pwsWD/PWS_index2.php
  3. Open pwsWD/PWS_index2.php in your code-editor and scroll to line 268 +/- depending on your version. The lines should look like
@media screen and (max-width: 639px) {
        .PWS_weather_item, .PWS_weather_item_s {margin: 2px auto 0; float: none; width: 99%;}   /* # 2023-08-01 */
        .PWS_middle {display: inline-block; float: none; }                                      /* # 2023-08-01 */
        .invisible {display: none;}
        .cposition4 {display: none;}
        .cposition3 {display: none;}
        .cposition2 {display: none;}
        .featherlight-content {height: 250px;}
}
  1. Replace those lines with
@media screen and (max-width: 639px) {
        .PWS_weather_item, .PWS_weather_item_s {margin: 2px auto 0; float: none; width: 99%;}   /* # 2023-08-01 */
        .PWS_weather_container {display: block;}                /* # 2025-05-20 */
        .PWS_middle {display: inline-block; float: none; }                                      /* # 2023-08-01 */
        .invisible {display: block;}                            /* # 2025-05-20 */
        .cposition4 {display: block;}                           /* # 2025-05-20 */
        .cposition3 {display: block;}                           /* # 2025-05-20 */
        .cposition2 {display: block;}                           /* # 2025-05-20 */
        .featherlight-content {height: 250px;}
}
  1. Save and run ./pwsWD/_test.php

No problem if you want someone else to do the modification.

There are multiple releases (5) and multiple versions for each release.
Prerequisite: You are using my “official” versions, not one of the numerous “adapted/improved” versions from someone else.

→ Zip your current ./pwsWD/PWS_index2.php and post it here.
I will update and test it for you but only if it is a recently updated 2012_lts version.

Succes,
Wim

1 Like

Ok, but the two Infos like “css you find in PWS_index2.php” and “replace source in box1 with box2” would have been enough. :wink:
For writing sources I’m using Zend Studio.

Thanks for your detailed information and your offer to make the change for me, but I just wanted to save myself the debugging and searching for the right place.

Rgds
Uwe